这时遇到一个问题,如果用户输入了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)便可以将实体编码转换回字符。