说一说“换行”踩的坑 | html換行字符
![说一说“换行”踩的坑](https://i.imgur.com/axBPWDg.jpg)
前言最近遇到这样一个需求:需要在页面中显示一段第三方文本信息。这些文本完全由第三方自己定义,我们负责显示在页面即可,第三方要求这些文本需要换行显示即可。我们都知道在HTML中,用标签可以实现换行,转义字符也可以实现换行。虽然效果一样,但是这两种换行的方式使用起来却不同。1.使用换行这种方式使用起来比较简单,用jQuery.html()方法即可。示例:varcontent=您确定要删除这行代码吗?;$(body).html(content);结果如下:但是很多时候这种方法用起来比较危险。比如你需要在页面中显示一段...
![说一说“换行”踩的坑](http://pix1.agoda.net/hotelimages/300/3008492/3008492_17121510550060424840.jpg?s=800x)
最近遇到这样一个需求:需要在页面中显示一段第三方文本信息。这些文本完全由第三方自己定义,我们负责显示在页面即可,第三方要求这些文本需要换行显示即可。
我们都知道在 HTML 中,用</br>标签可以实现换行,转义字符 也可以实现换行。虽然效果一样,但是这两种换行的方式使用起来却不同。
1.使用</br>换行这种方式使用起来比较简单,用 jQuery.html( )方法即可。示例:
var content = 您确定要删除</br>这行代码吗?; $(body).html(content);结果如下:
但是很多时候这种方法用起来比较危险。比如你需要在页面中显示一段第三方文本信息,由于文本来自第三方,很有可能被插入了恶意的script 脚本,如果用 html( )方法来显示这些文本,那很有可能被攻击。当然还有一个更加理所当然但是稍微费事的方法,那就是利用正则匹配将所有 替换为</br>,将所有其他 HTML 特殊字符(如<、>、&等)替换为转义字符串(也称字符实体(Character Entity)),这时候就可以用 $.html( )方法解决了!当然更好的方法应该是通过解析纯文本的方法如 text( )来显示这些文本。
2.使用 换行这种方式用起来比较坑,所以本文章的重点就是这一部分。因为之前知道 alert 弹框中要实现换行,只能通过 的方式,而不能通过</br>的方式。
(1) alert 弹框使用</br>换行结果示例:
var content = 您确定要删除</br>这行代码吗?; alert(content);结果为:
可以看到,通过</br>的方式并没法实现换行。
(2) alert 弹框使用 换行结果示例:
var content = 您确定要删除 这行代码吗?; alert(content);结果为:
(3) .innerHTML/ html( )方法中使用 换行结果对于大多数HTML元素,不管是...
取得本站獨家住宿推薦 15%OFF 訂房優惠
本站住宿推薦 20%OFF 訂房優惠,親子優惠,住宿折扣,限時回饋,平日促銷
HTML <br> 換行Line break | html換行字符
HTML | html換行字符
HTML 换行——如何使用<br> 标签添加换行符 | html換行字符
HTML 换行符——如何使用HTML <br> 标签换行 | html換行字符
HTML 換行br 與p 標籤 | html換行字符
HTML 文件編寫規則 | html換行字符
HTML中的换行和空格 | html換行字符
HTML教程 | html換行字符
HTML的换行符标签是什么? | html換行字符
html页面填入字符串,n换行不起作用,怎么办? | html換行字符
关于换行符n 与<br > | html換行字符
如何讓文字中的n 在HTML中換行? | html換行字符
如何让HTML 识别string 里的'n' 并成功换行? | html換行字符
文本换行符空格符怎么在HTML中进行转换? | html換行字符
渲染HTML中的字符串并保留空格和换行符 | html換行字符
用HTML br 替換 換行前先想一想 | html換行字符
说一说“换行”踩的坑 | html換行字符
![](https://i.imgur.com/axBPWDg.jpg)