No desenvolvimento do front-end, muitas vezes é necessário escapar dos suportes de ângulo esquerdo e reto do HTML em formas de entidade. Não podemos exibir <,> e etc. diretamente na página da web que finalmente vemos. Ele precisa ser escapado antes que possa ser exibido na página da web.
A sequência de escape também é chamada de entidade de caracteres. A principal razão para definir strings escapados é
Símbolos como "<" e ">" foram usados para representar a tag HTML, para que não possam ser usados diretamente como símbolos no texto. Mas às vezes a necessidade é usar esses símbolos nas páginas HTML, por isso precisa definir sua corda de fuga.
Alguns caracteres não são definidos no conjunto de caracteres ASCII (como o símbolo de direitos autorais "©"). Portanto, é necessário usar caracteres de fuga (o caractere de fuga correspondente a "©" is "©") para representá -los.
Aqui estão duas funções que escapam e descendente, que implementam respectivamente a fuga do HTML como entidades e giram.
Método 1. Uma mesa de mapeamento + substituição regular
A cópia do código é a seguinte:
var keys = object.keys || função (obj) {
obj = objeto (obj)
var arr = []
para (var a em obj) arr.push (a)
retornar arr
}
var invert = function (obj) {
obj = objeto (obj)
var resultado = {}
para (var a em obj) resultado [obj [a]] = a
resultado de retorno
}
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 para entidade
função escape (html) {
if (typeof html! == 'string') retornar ''
Retorne html.replace (entityreg.escape, function (match) {
Return entitymap.escape [Match]
})
}
// Vire a entidade de volta ao HTML
função unescape (str) {
if (typeof str! == 'string') retornar ''
Return str.Replace (entityreg.unescape, function (match) {
Return entitymap.unescape [Match]
})
}
Método 2: Utilizando a API do navegador DOM
A cópia do código é a seguinte:
// Escape Html para entidade
função escape (html) {
var elem = document.createElement ('div')
var txt = document.createTextNode (html)
Elem.appendChild (txt)
retornar elem.innerhtml;
}
// Vire a entidade de volta ao HTML
função unescape (str) {
var elem = document.createElement ('div')
elem.innerhtml = str
retornar elem.innerText || Elem.TextContent
}
Há uma falha que apenas "<> &" pode ser escapada e, para citações únicas, as citações duplas não são escapadas. Outros não-ASCII também não podem ser escapados. Preste atenção ao escolher.
Comparar:
Método 1 O volume de código é grande, mas a flexibilidade e a integridade são melhores que o método 2. O mapeamento da tabela EntityMap pode ser adicionado ou reduzido de acordo com os requisitos e pode ser executado em qualquer ambiente JS.
O método 2 é um método de hack, com uma quantidade muito menor de código, e você pode escapar e redirecioná -lo usando a API interna do navegador (ambos os navegadores principais suportam -o). Não está completo e é óbvio que só pode ser usado em um ambiente de navegador (como não executar no Node.js).