关于HTML在线编辑文本的编码与解码
2014-01-07 20:48
471 查看
很多在线编辑的网页都需要对用户输入的文本进行html的编码,避免输入的内容影响正常的网页排版,重新编辑时又需要进行对应的解码操作。用google搜索了一下,发现网上引用最多的两个函数是:
这两个函数存在以下问题,假如用户输入的文本为:
那么使用HTMLEncode的结果是:
没错!其中的&又被编码了一次,而且把<br>也进行了编码,其实理想情况下,多次调用HTMLEncode,应该结果保持不变。问题出现在HTMLEncode中的:
第二句与第一句话类似,表示<后面跟的不是br>时,才替换>为<。
第三句就比较费解了,这句想要达到的效果是当>前面的字符不是<br时替换>为>,它需要用到正则表达式中的negative lookbehind功能,但是javascript的正则表达式却不支持这以特性,如果支持的话,写起来就简单了,如下:
完整的HTMLEncode和HTMLDecode如下:
顺便说一下:CSDN博客的源代码编辑真的非常糟糕!
//编码 function HTMLEncode(str) { var s = ""; if (str.length == 0) return ""; s = str.replace(/&/g, "&"); s = s.replace(/</g, "<"); s = s.replace(/>/g, ">"); s = s.replace(/ /g, " "); s = s.replace(/\'/g, "'"); s = s.replace(/\"/g, """); s = s.replace(/\n/g, "<br>"); return s; } function HTMLDecode(str) { var s = ""; if (str.length == 0) return ""; s = str.replace(/&/g, "&"); s = s.replace(/</g, "<"); s = s.replace(/>/g, ">"); s = s.replace(/ /g, " "); s = s.replace(/'/g, "\'"); s = s.replace(/"/g, "\""); s = s.replace(/<br>/g, "\n"); return s; }
这两个函数存在以下问题,假如用户输入的文本为:
我输入了一些html标签\n&<div>就这么多</div>
那么使用HTMLEncode的结果是:
我输入了一些html标签<br>&<div>就这么多</div>这个结果没有问题,但是如果我用这个输出结果再执行一次HTMLEncode,结果就是:
我输入了一些html标签<br>&<div>就这么多</div>
没错!其中的&又被编码了一次,而且把<br>也进行了编码,其实理想情况下,多次调用HTMLEncode,应该结果保持不变。问题出现在HTMLEncode中的:
s = str.replace(/&/g, "&"); s = s.replace(/</g, "<"); s = s.replace(/>/g, ">");这句话中,它没有考虑传入的字符串是否已经经过编码了,而且没有考虑<和>是不是<br>中的,所以我们将改为:
s = str.replace(/&(?!(amp;|lt;|gt;|nbsp;|quot;))/g, "&"); s = s.replace(/<(?!br>)/g, "<"); s = s.replace(/(<br)?>/g, function ($0, $1) { return ($1 ? $0 : ">"); });第一句表示只有&后面跟的不是lt;|gt;|nbsp;|quot;这些时,才替换为&。
第二句与第一句话类似,表示<后面跟的不是br>时,才替换>为<。
第三句就比较费解了,这句想要达到的效果是当>前面的字符不是<br时替换>为>,它需要用到正则表达式中的negative lookbehind功能,但是javascript的正则表达式却不支持这以特性,如果支持的话,写起来就简单了,如下:
s = s.replace(/(?<!<br)>/g, ">");所以在javascript中想要达到同样的效果只能使用变通的办法,replace的第二个参数可以是一个函数,可以对匹配的结果进行处理之后再返回一个替换用的字符串,其中$0,$1,$2……可以作为参数使用,分别表示匹配到的完整字符串,第一个子表达式,第二个子表达式……,所以下面这句话的意思是:
s = s.replace(/(<br)?>/g, function ($0, $1) { return ($1 ? $0 : ">"); });先匹配>前面有<br或者没有<br(用?匹配),函数的功能是,如果前面有<br,也就是$1不为空,就使用匹配到的整个字符串$0替换(也就是没有变化),如果前面没有<br,也就是说$1为空,这时就返回>替换>。
完整的HTMLEncode和HTMLDecode如下:
function HTMLEncode(str) { var s = ""; if (str.length == 0) return ""; s = str.replace(/&(?!(amp;|lt;|gt;|nbsp;|quot;))/g, "&"); s = s.replace(/<(?!br\>)/g, "<"); s = s.replace(/(<br)?>/g, function ($0, $1) { return ($1 ? $0 : ">"); }); s = s.replace(/ /g, " "); s = s.replace(/\'/g, "'"); s = s.replace(/\"/g, """); s = s.replace(/\n/g, "<br>"); return s; } function HTMLDecode(str) { var s = ""; if (str.length == 0) return ""; s = str.replace(/&/g, "&"); s = s.replace(/</g, "<"); s = s.replace(/>/g, ">"); s = s.replace(/ /g, " "); s = s.replace(/'/g, "\'"); s = s.replace(/"/g, "\""); s = s.replace(/<br>/g, "\n"); return s; }
顺便说一下:CSDN博客的源代码编辑真的非常糟糕!
相关文章推荐
- 关于HTML数据在线编辑
- 在IFRAME中编辑(HTML文本在线编辑器原理之一)
- 在IFRAME中编辑(HTML文本在线编辑器原理之一)
- 关于URLEncoder的编码和URLDecode解码
- 关于在线编辑,点击即可编辑失去焦点即可保存的插件X-editable
- 对字符串进行HTML编码和解码的JavaScript函数
- 在非web应用程序中使用html编码和解码
- Base64在线编码解码实现代码 演示与下载
- 关于php,mysql,html的数字分页和文本分页的两种分页样式供大家参考
- 总结关于iPhone中UIWEBVIEW读取本地GBK编码格式html
- [python基础]关于中文编码和解码那点事儿
- C#关于编码、解码相关问题
- 关于dddd; 这种字符编码 如何解码
- 关于java web中的解码与编码
- 文本转换为HTML文字编码
- 关于文本编码格式转换的问题
- html编码和解码
- javascript html编码解码函数
- HTML Playground: HTML与CSS在线编辑
- 关于URLEncoder的编码和URLDecode解码