每当JavaScript中对HTML进行反转义

  在JavaScript中对字符串进行转义和反转义操作,常用之法其实用encodeURI
(decodeURI)、encodeURIComponent
(decodeURIComponent)这几个章程,具体使用方式和区分可以参考这篇稿子http://qianduanblog.com/post/js-learning-34-en-decodeuri-en-decodeuricomponent-un-escape-btoa-atob.html

  但是什么当JavaScript中对HTML进行反转义操作为?例如下面就段代码:

var jsonData = {
    title: "<%= data.name? data.name : title %>",
    desc: "<%= data.content? data.content : '' %>",
    image: "<%- data.img? data.img : '' %>"
};

  其中<%=
%>包起来的片是自服务端返回的价(上例被之代码取自Node.jsExpressejs模板的代码)。如果从服务端返回的字符串中涵盖有引号,例如单引号或者双引号,那上述这段JS代码在浏览器中讲的时节会并发错误。如何解决这题目呢?

  其基本思路是由此页面上DOM元素的innerHTML特性将字符串进行HTML反转义,然后用价值返回给JavaScript的变量。看下面两段子代码:

  1. 原生JavaScript写法:

    function htmlDecode(input){
    var e = document.createElement(‘div’);
    e.innerHTML = input;
    return e.childNodes.length === 0 ? “” : e.childNodes[0].nodeValue;
    }

    htmlDecode(“<img src=’myimage.jpg’>”);

  2. JQuery写法:

    function htmlDecode(value){
    return $(‘

    ‘).html(value).text();
    }

  第一个函数使用原生的JavaScript方法创建一个DIV元素,然后用需反转义的字符串赋值给其的innerHTML属性,最后回来DIV元素的nodeValue属性的价值。第二单函数则使JQuery的不二法门,其基本原理和第一只函数相同。由于DIV元素都只是当内存中创造,并未append或inert到页面上,所以未见面指向现有的页面产生其他影响。

  最后,我们将一如既往起的那段代码改成为下面的这种措施:

var jsonData = {
    title: $('<div/>').html("<%= data.name? data.name : title %>").text(),
    desc: $('<div/>').html("<%= data.nontent? data.nontent : '' %>").text(),
    image: "<%- data.img? data.img : '' %>"
};

   这样便好以JavaScript中对劳动器端返回的字符串进行HTML反转义操作了。