替换字符串中的 HTML 实体，避免使用 <img> 标记答案

【问题标题】：Replace HTML entities in a string avoiding <img> tags替换字符串中的 HTML 实体，避免使用 <img> 标记
【发布时间】：2013-10-24 21:51:39
【问题描述】：

我有以下输入：

Hi! How are you? <script>//NOT EVIL!</script>

Wassup? :P

LOOOL!!! :D :D :D

然后通过表情库运行它变成这样：

Hi! How are you? <script>//NOT EVIL!</script>

Wassup? <img class="smiley" alt="" title="tongue, :P" src="ui/emoticons/15.gif">

LOOOL!!! <img class="smiley" alt="" title="big grin, :D" src="ui/emoticons/5.gif"> <img class="smiley" alt="" title="big grin, :P" src="ui/emoticons/5.gif"> <img class="smiley" alt="" title="big grin, :P" src="ui/emoticons/5.gif">

我有一个转义 HTML 实体以防止 XSS 的函数。因此，在第一行的原始输入上运行它会产生：

Hi! How are you? &lt;script&gt;//NOT EVIL!&lt;/script&gt;

现在我需要转义所有输入，但同时我需要将表情符号保留在初始状态。所以当有&lt;:-P这个表情符号的时候，就一直这样，不会变成&lt;:-P。

我正在考虑对表情符号进行正则表达式拆分。然后单独处理每个部分，然后将字符串连接在一起，但我不确定 Regex 是否容易被绕过？我知道格式永远是这样的：

[<img class="smiley" alt="]
[empty string]
[" title="]
[one of the values from a big list]
[, ]
[another value from the list (may be matching original emoticon)]
[" src="ui/emoticons/]
[integer from Y to X]
[.gif">]

使用该列表可能会很慢，因为我需要在可能有 20-30-40 个表情符号的文本上运行该正则表达式。另外，可能需要处理 5-10-15 条短信。什么可能是一个优雅的解决方案？我准备为此使用第三方库或 jQuery。 PHP 预处理也是可能的。

【问题讨论】：

表情符号是放在JavaScript里的吗？为什么您不在 PHP 中也这样做，以便您可以在此之前 htmlentities() 并拥有更简单、更安全和更清洁的解决方案？您甚至可以减少带宽和 CPU 使用率。
以及使用特殊符号的表情，你可以简单的让你的脚本明白&lt;:-P是表情，而不是&lt;:-P。

标签： javascript jquery html regex

【解决方案1】：

也许这会对你有所帮助：

//TODO:Add the rest of emoticons here
var regExpEmoticons = /(\:P|\:\-P|\:D|\:\-D)/img;

function emoticonTag(title, filename) {
    return "<img class=\"smiley\" alt=\"\" title=\"" + title + "\" src=\"ui/emoticons/" + filename + "\">";
}

function replaceEmoticon(emoticon) {
    switch (emoticon.toUpperCase()) {
    case ':P':
    case ':-P':
        return emoticonTag("tongue, :P", "15.gif");
    case ':D':
    case ':-D':
        return emoticonTag("big grin, :D", "5.gif");
    //TODO: Add more emoticons
    }
}

function escapeHtml(string) {
    //TODO: Insert your HTML escaping code here
    return string;
}

function escapeString(string) {
    if (string == "") {
        return string;
    }
    var splittedString = string.split(regExpEmoticons);

    var result = "";
    for (var i = 0; i < splittedString.length; i++) {
        if (splittedString[i].match(regExpEmoticons)) {
            result += replaceEmoticon(splittedString[i]);
        } else {
            result += escapeHtml(splittedString[i]);
        }
    }
    return result;
}

有 3 个地方你必须改变：

将所有表情符号添加到 regExpEmoticons 变量中。
将所有表情符号添加到replaceEmoticon 函数的switch 语句中，或将整个函数更改为仅将表情符号字符串替换为包含标记的HTML 字符串。
将您的 HTML 转义代码添加到 escapeHtml 函数中，或将对该函数的调用更改为您正在使用的函数。

之后，如果你用你的字符串调用escapeString 方法，我认为它会起作用。

【讨论】：