In front-end development, it is often necessary to escape the left and right angle brackets of HTML into entity forms. We cannot display <,>, & etc. directly on the web page we finally see. 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
Symbols such as "<" and ">" have been used to represent HTML TAG, so they cannot be used directly as symbols in text. But sometimes the need is to use these symbols on HTML pages, so it needs to define its escape string.
Some characters are not defined in the ASCII character set (such as the copyright symbol "©"). Therefore, it is necessary to use escape characters (the escape character corresponding to "©" is "©") to represent them.
Here are two functions escape and unescape, which respectively implement the escape of HTML as entities and revolve.
Method 1. A mapping table + regular replacement
The code copy 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]
})
}
// Turn the 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: Utilizing the browser DOM API
The code copy is as follows:
// Escape HTML to entity
function escape(html){
var elem = document.createElement('div')
var txt = document.createTextNode(html)
elem.appendChild(txt)
return elem.innerHTML;
}
// Turn the entity back to HTML
function unescape(str) {
var elem = document.createElement('div')
elem.innerHTML = str
return elem.innerText || elem.textContent
}
There is a flaw that only "< > &" can be escaped, and for single quotes, double quotes are not escaped. Other non-ASCII cannot be escaped either. Pay attention when choosing.
Compare:
Method 1 The code volume is large, but the flexibility and integrity are better than Method 2. The mapping table entityMap can be added or reduced according to requirements, and can be run in any JS environment.
Method 2 is a hack method, with a much smaller amount of code, and you can escape and redirect it by using the browser's internal API (both mainstream browsers support it). It is not complete, and it is obvious that it can only be used in a browser environment (such as not running in Node.js).