JS实现HTML标签转义及反转义

JavaScript015

JS实现HTML标签转义及反转义,第1张

简单说一下业务场景,前台用户通过input输入内容,在离开焦点时,将内容在div中显示。

这时遇到一个问题,如果用户输入了html标签,则在div显示中,标签被解析。

由于是纯前端操作,不涉及后端,因此需要通过js对输入内容进行转义。

这里提供一个非常简单有效的转义方案,利用了innerHTML和innerText

注:火狐不支持innerText,需要使用

textContent

属性,而IE早期版本不支持此属性,为了同时兼容IE及火狐,需要进行判断操作.

因为innerText(textContent)会获取纯文本内容,忽略html节点标签,而innerHTML会显示标签内容,

所以我们先将需转义的内容赋值给innerText(textContent),再获取它的innerHTML属性,这时获取到的就是转义后文本内容。

代码如下:

function

HTMLEncode(html)

{

var

temp

=

document.createElement("div")

(temp.textContent

!=

null)

?

(temp.textContent

=

html)

:

(temp.innerText

=

html)

var

output

=

temp.innerHTML

temp

=

null

return

output

}

var

tagText

=

"<p><b>123&456</b></p>"

console.log(HTMLEncode(tagText))//<p><b>123&456</b></p>

通过测试结果,可以看到html标签及&符都被转义后保存。

同理,反转义的方法为先将转义文本赋值给innerHTML,然后通过innerText(textContent)获取转义前的文本内容

function

HTMLDecode(text)

{

var

temp

=

document.createElement("div")

temp.innerHTML

=

text

var

output

=

temp.innerText

||

temp.textContent

temp

=

null

return

output

}

var

tagText

=

"<p><b>123&456</b></p>"

var

encodeText

=

HTMLEncode(tagText)

console.log(encodeText)//<p><b>123&456</b></p>

console.log(HTMLDecode(encodeText))

//<p><b>123&456</b></p>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

js中的特殊字符,加上转义符\ 。

例如:

var txt="We are the so-called "Vikings" from the north." document.write(txt) 【错误】

var txt="We are the so-called \"Vikings\" from the north." document.write(txt) 【正确】

您好,您这样:

<html>

<head>

<title>字符转HTML实体编码</title>

<script>

function $(id) {return document.getElementById(id)}

function htmlEncode(input)

{

var code = input.charCodeAt()// 获得实体编码

var div = $("divCode")

/*

* 实体编码的格式是:数字

* &是 &

* # 是 #

* code 用户输入的字的实体编码

* 是

*

* 如果直接写成 "" + code + ""的形式会被浏览器直接解析为对应的字符,从而失去了编码的作用。

*/

div.innerHTML = "&" + "&#35" + code + "&#59"//String.fromCharCode(code)解码

}

</script>

</head>

<body>

<input type="text" onchange="htmlEncode(this.value)"/>

<div id="divCode"></div>

</body>

</html>

使用 String.fromCharCode(code)便可以将实体编码转换回字符。