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

html-css06

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>

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

Html中特殊字符不被转义,可以使用预格式化标签。pre 是 Preformatted text(预格式化文本) 的缩写。使用此标签可以把代码中的空格和换行直接显示到页面上。例如HTML代码: 

<pre> if (xx >5) { print "比5大!\n" } </pre>

浏览器显示效果:if (xx >5) {print "比5大!\n"}<textarea></textarea>之间包含有类似的这种转义字符的时候总会被解析,倒是可以把所有的"&"通过程序替换成"&",但是有些本来就是"&"的也会被转换,这就错了。如何让<textarea></textarea>之间包含的文本原封不动的显示出来呢?总结如下:解决方法有两种:第1种:

<body><textarea id='t' rows=20 cols=20></textarea><script>document.getElementById('t').innerText='a<&>'</script></body>

第2种:/*将字串转为html格式*/ 

public String strToHtml(String s) { if (s==null||s.equals("")) return "" s = s.replaceAll("&", "&") s = s.replaceAll("<", "<") s = s.replaceAll(">", ">") s = s.replaceAll(" ", " ") // s = s.replaceAll("/n", "") // s = s.replaceAll("'", "'") return s } /*将html格式转为字串*/ public String strToHtml(String s) { if (s==null||s.equals("")) return "" s = s.replaceAll("&","&") s = s.replaceAll("<","<") s = s.replaceAll(">",">") s = s.replaceAll(" "," ") //s = s.replaceAll("","/n") //s = s.replaceAll("'","'") return s }

最后一点:jQuery的.html()方法默认会转义的,这种情况使用.text()就不会转义了。