Two ways to escape the HTML's left and right angle brackets into an entity form

This article mainly introduces the HTML of the left and right angle brackets to escape into the form of two implementations, the need for friends can refer to the

In front-end development work, it is often necessary to escape the left and right angle brackets of HTML into solid form. We can not put <,>,& and so on directly in the final view of the page. It needs to be escaped before it can be displayed on the Web page.

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

Symbols such as "<" and ">" are already used to represent HTML TAG and 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, you need to use the escape character (the "©" corresponding to the escape character is "©") to be represented.

This provides two functions for escape and unescape, respectively, for escaping HTML as an entity and a rotation.

Mode de jure mapping table + regular substitution

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 '

}

To escape HTML as an entity

function Escape (HTML) {

if (typeof HTML!== ' string ') return '

Return Html.replace (Entityreg.escape, function (match) {

return Entitymap.escape[match]

})

}

Revert an entity to HTML

function unescape (str) {

if (typeof str!== ' string ') return '

Return str.replace (Entityreg.unescape, function (match) {

return Entitymap.unescape[match]

})

}

Mode two, using the browser Dom API

The code is as follows:

To escape HTML as an entity

function Escape (HTML) {

var elem = document.createelement (' div ')

var txt = document.createtextnode (HTML)

Elem.appendchild (TXT)

return elem.innerhtml;

}

Revert an entity 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, and double quotes are not escaped for single quotes. Some other non-ASCII also cannot be escaped. Be careful when choosing.

Comparison:

Mode 1 has a large amount of code, but flexibility, completeness is stronger than the mode 2. Can add or reduce the mapping table Entitymap according to the requirement, and can run in any JS environment.

Mode 2 is the hack way, the amount of code is much less, the use of the browser's internal APIs on the line of escape and reversal (mainstream browsers are supported). Without integrity, it is obvious that it can only be used in a browser environment (such as not running in Node.js).

Note : Please pay attention to the triple programming Tutorials section for more wonderful articles .