Question

如何仅编码html标签^＆lt; ＆GT; “

仅使用.innerHTML编码html标签

找到html：＆amp; ＆LT; ＆GT; “

替换html：＆amp; ＆LT; ＆GT; ＆安培;＃34

       var Code = document.getElementsByTagName("code");
       var charsToReplace = {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&#34;'
        };
      Code[0].innerHTML = ?????;


html input:
<code>

<code>
<div><div>
<script></script>
</code>

</code>

html output:
<code>

&lt;code&gt;
&lt;div&gt;&lt;div&gt;
&lt;script&gt;&lt;/script&gt;
&lt;/code&gt;

<code>

Answer 1

使用String prototype

一种可能的解决方案是定义一个replaceAll函数，例如在String的原型中：

String.prototype.replaceAll = function(search, replace) {
    return this.replace(new RegExp('[' + search + ']', 'g'), replace);
};

在此之后，您只需要遍历charsToReplace：

的属性

for (var prop in charsToReplace) {
   if (charsToReplace.hasOwnProperty(prop)) {
       str = str.replaceAll(prop, charsToReplace[prop]));
   }
}

最终str可以分配给innerHTML。

使用正常功能

如果由于某种原因，你不想搞乱原型，你可以为同一个任务定义一个普通的JavaScript函数：

var replaceAll = function (str, search, replace) {
    return str.replace(new RegeExp('[' + search + ']', 'g'), replace);
}

这实际上是一样的，你只需要将字符串实例传递给它：

str = replaceAll(str, prop, charsToReplace[prop]));

另一种方法

如果您经常使用这些方法，可以考虑将正则表达式模式存储在charsToReplace对象中，如下所示：

var charsToReplace = {
    '&': {
        pattern: new RegExp('[' + '&' + ']', 'g'),
        replace: '&amp;'
    }
    ...
}

所以你的replaceAll函数看起来像这样：

var replaceAll = function (str, replacement) {
    return str.replace(replacement.pattern, replacement.replace);
}

这样您就不需要每次都重新创建正则表达式，这可以节省一些处理时间。

Answer 2

如何仅编码html标签^＆lt; ＆GT; “

function encode(e) {
  return e.replace(/[\<\>\"\^]/g, function(e) {
	return "&#" + e.charCodeAt(0) + ";";
  });
}

test.value=encode('How to encode only html tags ^ < > "');

<textarea id=test rows=11 cols=55>www.WHAK.com</textarea>

Answer 3

如果要替换实际的innerHTML（包括每个标记的内容），那么您可以简单地使用.replace（）链，如下所示：

var HTML = document.getElementByTagName('code')[0];
HTML = HTML.replace('&', '&amp;').replace('<', '&lt;').replace('>', '&gt;').replace('"', '&gt;');

如果你这样做，一定要更换＆amp;在任何其他人之前，为了避免无意的角色替换。

但是，如果您只想更换标签本身而不是内部内容，则会更加困难。您需要创建一个空白元素，例如DIV，将你的innerHTML放在里面，然后从上面最深的子元素开始工作。

希望有所帮助。

如何编码html标签实体 - JavaScript

3 个答案:

使用String prototype

使用正常功能

另一种方法