使用 Javascript 将 HTML 转换为其安全实体答案

【问题标题】：Converting HTML to its safe entities with Javascript使用 Javascript 将 HTML 转换为其安全实体
【发布时间】：2011-03-05 05:45:35
【问题描述】：

我正在尝试将&lt; 和&gt; 等字符转换为&lt; 和&gt; 等。

用户输入取自文本框，然后复制到名为 changer 的 DIV 中。

这是我的代码：

function updateChanger() {
    var message = document.getElementById('like').value;
    message = convertHTML(message);
    document.getElementById('changer').innerHTML = message;
}

function convertHTML(input)
{
    input = input.replace('<', '&lt;');
    input = input.replace('>', '&gt;');
    return input;
}

但它似乎没有取代&gt;，只有&lt;。也试过这样：

input = input.replace('<', '&lt;').replace('>', '&gt;');

但我得到了相同的结果。

谁能指出我在这里做错了什么？干杯。

【问题讨论】：

标签： javascript html replace html-entities

【解决方案1】：

一个更强大的方法是create an HTML text node;这样，所有其他可能无效的内容（不仅仅是）都会被转换。例如：

var message = document.getElementById('like').value;
document.getElementById('changer').appendChild(document.createTextNode(message));

更新

您提到您的事件在每次按键时触发。如果这是触发此代码的原因，您需要在附加文本之前删除 div 中以前的内容。一个简单的方法是这样的：

var message = document.getElementById('like').value;
var changer = document.getElementById('changer');
changer.innerHTML = '';
changer.appendChild(document.createTextNode(message));

【讨论】：

那么文本节点中的所有HTML都是安全的吗？就像在所有中一样，垃圾被转换为它们的实体？
我遇到了一个问题，在keyUp上调用了updateChanger()函数，所以当我在文本字段中输入时，它会不断地创建一个新的文本节点。我应该只在 document.ready 上创建文本节点吗？
是的，它会把你的文本当作文本而不是标记，所以相当于转换了所有的特殊字符。
至于你的事件触发，你总是可以先清除div。

【解决方案2】：

试试这样的：

function convertHTML(input)
{
  input = input.replace(/>/g, '&gt;');
  input = input.replace(/</g, '&lt;');

  return input;
}

replace 仅替换字符串中第一次出现的 > 或，使用带有 g 参数的正则表达式来确保在整个字符串中搜索所有出现的值。

【讨论】：

你可能想returninput的新值。
这解决了我的问题，谢谢，但雅各布的回答是做我正在做的事情的更好方法，所以我会接受他的。不过非常感谢！ :)