如何判断字符串是否包含 HTML 实体（如 &）？答案

【问题标题】：How to tell if a string contains HTML entity (like &)?如何判断字符串是否包含 HTML 实体（如 &）？
【发布时间】：2013-01-09 12:31:38
【问题描述】：

我正在尝试编写一个函数，根据一组特殊的 HTML 实体（例如用户输入“&amp”而不是“&”）检查参数，然后在这些输入的实体周围添加一个跨度。

如何搜索字符串参数来找到它？会是正则表达式吗？

这是我目前的代码：

 function ampersandKiller(input) {
 var specialCharacters = ['&amp;', '&nbsp;']
 if($(specialCharacters).contains('&amp;')) {
     alert('hey')
 } else {
     alert('nay')
 }
}

显然这不起作用。有人有什么想法吗？

因此，如果传递了像My name is &amp; 这样的字符串，它将呈现My name is <span>&amp;</span>。如果一个特殊字符被列出两次——比如“我真的很喜欢&amp;&amp;&amp;”，它只会渲染每个元素周围的跨度。用户还必须能够使用普通的&。

【问题讨论】：

能提供简单的测试用例吗？比如哪个字符串应该匹配，哪个不应该匹配。
刚刚添加。谢谢你的提示！
你实际上想做什么？在我看来，您正在尝试解决一个您甚至不应该首先遇到的问题。你能解释一下这个问题吗？
我正在开发一个基于用户输入的应用程序。我试图允许用户传递特殊字符和 HTML 实体——但为了阻止实体呈现，我希望在它从服务器返回之前将其包装在
如果你在服务器端进行，每种编程语言都有一个 HTML 编码功能。如果您尝试在客户端执行此操作，则将字符串分配给元素的文本值而不是使用 innerHTML 是正确的。这取决于你做什么。

标签： javascript jquery html-entities

【解决方案1】：

function htmlEntityChecker(input) {
    var characterArray = ['&amp;', '&nbsp;'];
    $.each(characterArray, function(idx, ent) {
        if (input.indexOf(ent) != -1) {
            var re = new RegExp(ent, "g");
            input = input.replace(re, '<span>' + ent + '</span>');
        }
    });

    return input;
}

FIDDLE

【讨论】：

他将如何将 ent 包裹在 span 中？
这很棒，正是我所要求的！然而@Jack 的解决方案做了同样的事情，但更简洁。我会保留它以供将来参考，因为它写得很漂亮。

【解决方案2】：

您可以使用这个正则表达式来查找和包装实体：

input.replace(/&amp;|&nbsp;/g, '<span>$&</span>')

对于任何类型的实体，您也可以使用它：

input.replace(/&(?:[a-z]+|#\d+);/g, '<span>$&</span>');

它匹配“单词”实体以及数字实体。例如：

'test & &amp; &#60;'.replace(/&(?:[a-z]+|#x?\d+);/gi, '<span>$&</span>');

输出：

test & <span>&amp;</span> <span>&#60;</span>

【讨论】：

该数组最终将（并且希望）包含所有主要实体，而不仅仅是这两个。是否可以使用替换来做到这一点？
@streetlight 我添加了一个表达式，可以匹配任何实体，甚至是数字实体。
如何将其重构为 if-else 语句？因此，例如，如果输入有通过这个正则表达式找到的任何字符，那么做点什么？

【解决方案3】：

另一种选择是让浏览器为您进行解码并检查长度是否有任何不同...检查this question 以了解如何取消实体的转义。然后，您可以将原始字符串的长度与解码后的长度进行比较。下面的例子：

function htmlDecode(input){
    var e = document.createElement('div');
    e.innerHTML = input;
    return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}
function hasEntities(input) {
    if (input.length != htmlDecode(input).length) {
       return true;
    }
    return false;
}
alert(hasEntities('a'))
alert(hasEntities('&amp;'))

上面将显示两个警报。先假后真。

【讨论】：