En el desarrollo delantero, a menudo es necesario escapar de los soportes de ángulo izquierdo y derecho de HTML en formas de entidad. No podemos mostrar <,>, etc. directamente en la página web que finalmente vemos. Debe escaparse antes de que se pueda mostrar en la página web.
La secuencia de escape también se llama entidad de personaje. La razón principal para definir cadenas escapadas es
Se han utilizado símbolos como "<" y ">" para representar la etiqueta HTML, por lo que no pueden usarse directamente como símbolos en el texto. Pero a veces la necesidad es usar estos símbolos en las páginas HTML, por lo que debe definir su cadena de escape.
Algunos caracteres no se definen en el conjunto de caracteres ASCII (como el símbolo de derechos de autor "©"). Por lo tanto, es necesario usar caracteres de escape (el carácter de escape correspondiente a "©" es "©") para representarlos.
Aquí hay dos funciones Escape y Unescape, que implementan respectivamente el escape de HTML como entidades y giran.
Método 1. Una tabla de mapeo + reemplazo regular
La copia del código es la siguiente:
Var teclas = Object.Keys || función (obj) {
obj = objeto (obj)
var arr = []
para (var a en obj) arr.push (a)
regresar arr
}
var invert = function (obj) {
obj = objeto (obj)
resultado var = {}
para (var a en obj) resultado [obj [a]] = a
Resultado de retorno
}
var entitymap = {
escapar: {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'":' ''
}
}
entitymap.unescape = invert (entitymap.escape)
var entityreg = {
Escape: regexp ('[' + teclas (entitymap.escape) .Join ('') + ']', 'g'),
unescape: regexp ('(' + teclas (entitymap.unescape) .Join ('|') + ')', 'g')
}
// escapar de html a entidad
Función Escape (html) {
if (typeof html! == 'string') return ''
return html.replace (entityReg.escape, function (coincy) {
return entitymap.escape [Match]
})
}
// volver a la entidad a HTML
función unescape (str) {
if (typeof str! == 'string') return ''
return str.replace (entityreg.unescape, function (coincy) {
return entitymap.unescape [Match]
})
}
Método 2: Utilización de la API DOM del navegador
La copia del código es la siguiente:
// escapar de html a entidad
Función Escape (html) {
var elem = document.createElement ('div')
var txt = document.createTextNode (HTML)
Elem.appendChild (txt)
regreso elem.innerhtml;
}
// volver a la entidad a HTML
función unescape (str) {
var elem = document.createElement ('div')
elem.innerhtml = str
return elem.inntext || Elem.TextContent
}
Hay una falla que solo se puede escapar "<> y", y para citas individuales, no se escapan de citas dobles. Otros no ASCII tampoco se pueden escapar. Presta atención al elegir.
Comparar:
Método 1 El volumen del código es grande, pero la flexibilidad y la integridad son mejores que el Método 2. La Tabla de mapeo EntityMap se puede agregar o reducir de acuerdo con los requisitos, y se puede ejecutar en cualquier entorno JS.
El método 2 es un método de hack, con una cantidad de código mucho menor, y puede escapar y redirigirlo utilizando la API interna del navegador (ambos navegadores convencionales lo admiten). No está completo, y es obvio que solo se puede usar en un entorno de navegador (como no ejecutar en Node.js).