Question

我一直在寻找答案，但找不到我的特定用例：我正在尝试通过HTML标记使字符串中的所有匹配（来自字典对象）显示为绿色。

特别是在我没有找到解决方法的情况下（在我的代码之后解释）。

var data = "cat fish";

var dictionary = {
    "regex1": "cat",
    "regex2": "cat fish"
}


function buildColoredString(data, dictionary) {
    var coloredString = data;

    for (var prop in dictionary) {
        var toReplace = new RegExp(dictionary[prop].regex, "g");
        var newString = "<b style='color: green;'>" + dictionary[prop].regex + "</b>";
        coloredString = coloredString.replace(toReplace, newString);
    }

    console.log(coloredString);
}

运行buildColoredString时我只得到了＃34; cat＆＃34;被HTML标签包围，但不是＆＃34; cat fish＆＃34;由于HTML标签现在存在于我正在构建的字符串中，因此它不匹配。任何想法如何解决这个问题并获得＆＃34; cat＆＃34; ＆安培; ＆＃34;猫鱼＆＃34;被HTML标签包围（我不介意，如果有太多的标签，从视觉角度来看它们中的一些是无用的。

感谢您的帮助，祝您度过愉快的一天！

Answer 1

按照String的大小对字典进行排序。做猫鱼＆＃34;先是＆＃34; cat＆＃34;第二...

Answer 2

您可以先运行10正则表达式替换。在这里＆＃34; 字典＆＃34;转换为列表以保留订单。

您还可以使用Registry.GetValue("HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion", "CurrentMajorVersionNumber", Nothing)来引用匹配的文字：

cat fish

Answer 3

由于cat fish包含cat，您需要同时搜索它们，时间越早。

你可以把你想要突出显示的字符串放在像Martin建议的数组中，但是在相同的组中使用它们将它们与|分开。

var arr = [
    "cat fish",
    "cat",
];

function buildColoredString(data, arr) {
    var coloredString = data;
    var replaceGroups = arr.join('|');

    var toReplace = new RegExp("(" + replaceGroups + ")", "g");
    var newString = "<b style='color: green;'>$1</b>";
    coloredString = coloredString.replace(toReplace, newString);

    console.log(coloredString);
};

我提供了一个jsfiddle，cat和cat fish围绕同一个句子中的标记而不重叠。

将html标签放在字符串中的匹配项周围

3 个答案: