如何编码 html 标签实体 - JavaScript

Posted 2023-05-07

【中文标题】如何编码 html 标签实体 - JavaScript

【英文标题】：How to encode html tag entities - JavaScript

【发布时间】：2015-03-02 03:16:08

【问题描述】：

如何只编码 html 标签 ^ "

仅使用 .innerHTML 编码 html 标签

查找 html : & "

替换 html : & "

       var Code = document.getElementsByTagName("code");
       var charsToReplace = 
            '&': '&',
            '<': '&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>

【问题讨论】：

Encode html entities in javascript 的可能重复项

这不是我的答案，只用 innerHTML 编码 html 标签

【参考方案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: '&'
    
    ...

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

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

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

【讨论】：

Code[i].innerHTML=Code[i].innerHTML.replace(/,"<").replace(/>/g,">").replace( /"/g,""");

【参考方案2】：

如何只编码 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>

【讨论】：

嗯——问题还是答案？

【参考方案3】：

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

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

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

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

希望对您有所帮助。