Two implementations of escaping HTML such as the left and right Angle brackets into entity form

In front-end development, it is often necessary to escape the left and right Angle brackets of HTML into entity form. We can't put < , > , & etc. are displayed directly in the page that you finally see. It needs to be escaped before it can be displayed on a web page.

Escape Sequence is also called a Character Entity. The main reason for defining an escape string is

"<" And ">" Isotherms are already used to represent HTML tags, so they cannot be used directly as symbols in text. But sometimes the requirement is to use these symbols on an HTML page, so you need to define its escape string.
Some characters are not defined in the ASCII character set (such as the copyright symbol "©"). ). Therefore, escape characters (" © ") are required. The corresponding escape character is "©" ).

Two functions, escape and unescape, are provided to escape HTML as an entity and a turn, respectively.

Method 1, a mapping table + regular replacement

 
var keys = Object.keys || function(obj) { 
obj = Object(obj) 
var arr = [] 
for (var a in obj) arr.push(a) 
return arr 
} 
var invert = function(obj) { 
obj = Object(obj) 
var result = {} 
for (var a in obj) result[obj[a]] = a 
return result 
} 
var entityMap = { 
escape: { 
'&': '&', 
'<': '<', 
'>': '>', 
'"': '"', 
"'": ''' 
} 
} 
entityMap.unescape = invert(entityMap.escape) 
var entityReg = { 
escape: RegExp('[' + keys(entityMap.escape).join('') + ']', 'g'), 
unescape: RegExp('(' + keys(entityMap.unescape).join('|') + ')', 'g') 
} 

//Escapes HTML as an entity
function escape(html) { 
if (typeof html !== 'string') return '' 
return html.replace(entityReg.escape, function(match) { 
return entityMap.escape[match] 
}) 
} 
//Returns the entity as HTML
function unescape(str) { 
if (typeof str !== 'string') return '' 
return str.replace(entityReg.unescape, function(match) { 
return entityMap.unescape[match] 
}) 
} 

Second, the use of the browser DOM API

 
//Escapes HTML as an entity
function escape(html){ 
var elem = document.createElement('div') 
var txt = document.createTextNode(html) 
elem.appendChild(txt) 
return elem.innerHTML; 
} 
//Returns the entity as HTML
function unescape(str) { 
var elem = document.createElement('div') 
elem.innerHTML = str 
return elem.innerText || elem.textContent 
} 

One drawback is that it can only be escaped "< > ", for single quotes, double quotes are not escaped. Other non-ascii characters cannot be escaped. Be careful when choosing.

Comparison:

Mode 1 has more code, but more flexibility and integrity than mode 2. The mapping table entityMap can be added or reduced as required and can run in any JS environment.

Method 2 is a hack, with much less code, which can be escaped and turned back using the browser's internal API (which is supported by all major browsers). No integrity, obviously only used in a browser environment (such as not running in node. js).