JS Html转义和反转义（html编码和解码）的实现与使用方法总结

一、什么是Html编码和解码？

Html编码和解码是将一些特殊的字符转化成HTML格式，以便在HTML页面中混排，并且不产生歧义，同时避免一些恶意代码的注入，以保证浏览器的渲染正确和安全。

Html编码一般针对特殊字符，比如<、>、"、'、&等进行转化；Html解码则是将已经编码的字符转回其原本的形式。常用的HTML编码和解码方式有两种：JavaScript方式和PHP方式。

二、JavaScript实现Html编码和解码

JavaScript实现HTML编码可以使用浏览器内置的API：var encodedStr = escape(str);，其中str是原始字符串，encodedStr是编码后的字符串。但是该方法只能对少量字符进行编码，因此更好的方案是使用正则表达式。

Javascript实现HTML解码可以使用内置的浏览器函数：var decodedStr = decodeURIComponent(escape(str));，同时也可以使用正则表达式。

以下是一些HTML编码和解码的JavaScript示例代码：

// HTML编码
function htmlEncode(str){
    var s = "";
    if(str.length == 0) return "";
    s = str.replace(/&/g,"&");
    s = s.replace(/</g,"&lt;");
    s = s.replace(/>/g,"&gt;");
    s = s.replace(/ /g,"&nbsp;");
    s = s.replace(/\'/g,"&#39;");
    s = s.replace(/\"/g,"&quot;");
    return s;
}

// HTML解码
function htmlDecode(str){
    var s = "";
    if(str.length == 0) return "";
    s = str.replace(/&amp;/g,"&");
    s = s.replace(/&lt;/g,"<");
    s = s.replace(/&gt;/g,">");
    s = s.replace(/&nbsp;/g," ");
    s = s.replace(/&#39;/g,"\'");
    s = s.replace(/&quot;/g,"\"");
    return s;
}

三、Vue.js中实现Html编码和解码

在 Vue.js 中，可以使用过滤器来实现HTML编码和解码。以下是HTML编码和解码的Vue.js示例代码：

// HTML编码
Vue.filter('htmlEncode', function (value) {
    var s = "";
    if(value.length == 0) return "";
    s = value.replace(/&/g,"&");
    s = s.replace(/</g,"&lt;");
    s = s.replace(/>/g,"&gt;");
    s = s.replace(/ /g,"&nbsp;");
    s = s.replace(/\'/g,"&#39;");
    s = s.replace(/\"/g,"&quot;");
    return s;
});

// HTML解码
Vue.filter('htmlDecode',function (value) {
    var s = "";
    if(value.length == 0) return "";
    s = value.replace(/&amp;/g,"&");
    s = s.replace(/&lt;/g,"<");
    s = s.replace(/&gt;/g,">");
    s = s.replace(/&nbsp;/g," ");
    s = s.replace(/&#39;/g,"\'");
    s = s.replace(/&quot;/g,"\"");
    return s;
});

四、Html编码和解码的常见使用场景

1. 在HTML页面中，如果需要展示一些特殊符号时，需要先进行编码，才能在页面上正确显示。例如：

<p> 1 &lt; 2 </p>

在浏览器中显示的结果为：1 < 2

1. 当从用户输入中读取数据时，需要进行解码，以避免安全风险。例如：

var inputStr = 'Hello & World';
var decodedStr = htmlDecode(inputStr);

其中 inputStr 是输入的字符串，decodedStr 是解码后的字符串，最终结果为：Hello & World。

以上是对“JS Html转义和反转义（html编码和解码）的实现与使用方法总结”的详细讲解。