如何编码 html 标签实体 - JavaScript

Question

如何只编码 html 个标签 ^ < > "

仅使用 .innerHTML 编码 html 个标签

查找 html : & < > "

替换 html : & < > "

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


html input:



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




html output:


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

Answer 1

使用字符串原型

一个可能的解决方案是定义一个 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

如果你想替换实际的 innerHTML，它会包含每个标签的内容，那么你可以简单地使用一个 .replace() 链，如下所示：

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

如果您这样做，请务必在替换任何其他字符之前替换 &，以避免无意的字符替换。

但是，如果您只是想替换标签本身，而不是其中的内容，这将更加困难。您需要创建一个空白元素，例如DIV，将您的 innerHTML 放入其中，然后从最深的子元素开始执行上述操作。

希望对您有所帮助。

Answer 3

如何只编码 html 个标签 ^ < > "

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>

如何编码 html 标签实体 - JavaScript

How to encode html tag entities - JavaScript

html

javascript

innerhtml

html-entities

使用字符串原型

使用正常功能

另一种方法