这时遇到一个问题,如果用户输入了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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
<div style="width:100pxheight:100pxborder:1px solid redborder-radius:50pxline-height:100pxtext-align:centercolor:red">设计师
</div>
要做一个圆圈,首先要做一个正方形的div,然后加上border边框,边框要用border-radius圆角,当圆角像素等于div长宽的一半时,就变成了一个圆形边框
中间的文字用line-height和text-align上下左右居中
还有那个箭头应该是图片来的,可以当背景图片插入,这个我就不写了
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()就不会转义了。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)