Two ways to escape HTML's left and right angle brackets into entity forms_javascript skills

In front-end development work, it is often necessary to escape the left and right angle brackets of HTML into entity form. We cannot display <, >, &, etc. directly in the final web page. It needs to be escaped before it can be displayed on the web page.

Escape Sequence is also called Character Entity. The main reason for defining escaped strings is that symbols such as

, "<" and ">" have been 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 HTML pages, so its escape string needs to be defined.
Some characters are not defined in the ASCII character set (such as the copyright symbol "©"). Therefore, it is necessary to use escape characters (the corresponding escape character for "©" is "©").

Two functions escape and unescape are provided here to escape and reverse HTML into entities respectively.

Method 1, regular replacement with a mapping table

Copy the code The code is as follows:

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')
}

// Escape HTML to entity
function escape(html) {
if (typeof html !== 'string') return ''
return html.replace(entityReg.escape, function(match) {
return entityMap.escape[match]
})
}
// Convert entity back to HTML
function unescape(str) {
if (typeof str !== 'string') return ''
return str.replace(entityReg .unescape, function(match) {
return entityMap.unescape[match]
})
}

Method 2. Use browser DOM API

Copy code The code is as follows:

// Escape HTML to entities
function escape(html){
var elem = document.createElement('div')
var txt = document.createTextNode(html)
elem.appendChild(txt)
return elem.innerHTML;
}
/ / Convert entity back to HTML
function unescape(str) {
var elem = document.createElement('div')
elem.innerHTML = str
return elem.innerText || elem.textContent
}

One flaw is that only "< > &" can be escaped. Single quotes and double quotes are not escaped. In addition, some non-ASCII characters cannot be escaped. Be careful when choosing.

Comparison:

Method 1 has a larger amount of code, but its flexibility and completeness are better than Method 2. The mapping table entityMap can be added or reduced according to needs, and can run in any JS environment.

Method 2 is a hack method with much less code. You can use the browser’s internal API to escape and reverse (supported by all major browsers). It is not complete and obviously can only be used in a browser environment (for example, it cannot run in Node.js).