转义字符的通用处理方式

 

1       背景

文章内容或者文章标题一般来说都可以含有一些特殊的字符，如:

原始字符	转义字符
"&"	"&"
"<"	"&lt;"
">"	"&gt;"
"\""	"&quot;" 扫描二维码关注公众号，回复： 572856 查看本文章

如果这些字符直接显示在html中，如显示在<div></div>中，就会破坏原有的html的结构，导致html页面不能正确显示。如下例子:

<p>

<img src="upload123.jpg">

<test>abcd</test>

</p>

在浏览器中是不会显示内容:<test>abcd</test>，因为浏览器碰到不能识别的标签会自动忽略。因此需要test中相关的内容就需要转义:

<p>

<img src="upload123.jpg">

&lt;test&gt;abcd&lt;/test&gt;

</p>

 

2       处理方式

2.1     什么时候转义

一般来说存储在持久层(如数据库中)的数据需要保存原始的字符，即不进行转义。然后在前端页面渲染的时候进行转义。

但是某些编辑器编辑的时候就自动转义，即发送给后端的就是转义后的字符。如CKEditor。

 

 

 

对于这样的编辑器直接将数据库中获取到的转义后的数据赋给编辑器即可。它会自动处理。

但是不能采用如下方式：

CKEDITOR.replace('editor1',{customConfig : 'root/resources/js/ckeditor_config.js'} );

即如果：

<textarea cols="80" id="editor1" name="contents" rows="10">&lt;test&gt;abcd&lt;/test&gt;

</textarea>

在编辑器中还是显示不是test的内容的。必须使用setData的方式。

CKEDITOR.instances.editor1.setData(‘&lt;test&gt;abcd&lt;/test&gt;’);

2.2     编辑时如何处理

一般内容的编辑时在input或者是textarea中进行编辑。如果直接给它赋值转义后的字符，它会自动的在编辑框中显示原始的字符。因此一般来说不需要特殊处理。

如:

<input type=”text” value=” &lt;test&gt;abcd&lt;/test&gt;”>