将 JavaScript 代码分配给 InnerHtml 时转义 < 和 >

Question

我通过将一些 javascript 代码分配给 Html 节点

的内部 Html 属性以编程方式将其添加到脚本标签

scriptNode.InnerHtml =new_script;

并且我的 javascript 包含少于 < and/or 大于 > 个字符，这会导致问题 - 扭曲我的结果 javascript。我怎样才能逃脱这些。

这是导致问题的示例 javascript：

function myFunc(el){
    var i=0
    for (;i < el.choice.length;i++){
        ....
    }
}

如何在为我的 Html 节点分配代码为 InnerHtml 时转义上面代码中的 <？

Answer 1

这是一个简单的字符串转义代码：

function escapeHtml(text) {
  var map = {
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#039;'
  };

  return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}

Answer 2

您可以使用 > 和 < 的 HTML 代码，即 < 和 >

或

您可以像这样将脚本包装在 CDATA 中：

<script>
    <![CDATA[
        --YOUR SCRIPT--
    ]]>
</script>

Answer 3

为此，您需要对 javascript 内容进行编码和解码。请参考以下代码：

function htmlEncode(value){
  //create a in-memory div, set it's inner text(which jQuery automatically encodes)
  //then grab the encoded contents back out.  The div never exists on the page.
  return $('<div/>').text(value).html();
}

function htmlDecode(value){
  return $('<div/>').html(value).text();
}

htmlEncode('<b>test</b>')
// result"&lt;b&gt;test&lt;/b&gt;"

@CMS

发布previously

将 JavaScript 代码分配给 InnerHtml 时转义 < 和 >

Escaping < and > in JavaScript code when assigning it to InnerHtml

html

javascript

html-agility-pack