jquery html特殊字符反转义,JS - 实现HTML标签的转义、反转义的几种方法

zyf13671493506

已于 2023-07-13 17:25:25 修改

阅读量1.3k

点赞数

文章标签： javascript jquery html

于 2023-07-13 16:27:42 首次发布

本文链接：https://blog.csdn.net/zyf13671493506/article/details/131705670

版权

您可以使用jQuery的.text()方法来实现HTML标签的转义和反转义。
注意：
赋值的时候，我们要转义，防止用户恶意输入，如Script标签。拿值的时候
我们需要原本的数据【反转义】。

转义HTML标签：使用.text()方法将HTML标签中的特殊字符进行转义，如下所示：

var html = '<div><p>Hello, World!</p></div>';
var escapedHtml = $('<div>').text(html).html();
console.log(escapedHtml);

反转义HTML标签：使用.html()方法将转义后的HTML标签进行反转义，如下所示：

var escapedHtml = '&lt;div&gt;&lt;p&gt;Hello, World!&lt;/p&gt;&lt;/div&gt;';
var unescapedHtml = $('<div>').html(escapedHtml).text();
console.log(unescapedHtml);

除了使用jQuery的方法外，还可以使用原生JavaScript来实现HTML标签的转义和反转义。

转义HTML标签：可以使用document.createElement('textarea').textContent来进行转义，如下所示：

var html = '<div><p>Hello, World!</p></div>';
var escapedHtml = document.createElement('textarea').textContent = html;
console.log(escapedHtml);

反转义HTML标签：可以使用innerHTML属性来进行反转义，如下所示：

var escapedHtml = '&lt;div&gt;&lt;p&gt;Hello, World!&lt;/p&gt;&lt;/div&gt;';
var unescapedHtml = document.createElement('textarea').innerHTML = escapedHtml;
console.log(unescapedHtml);