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

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 时，我只得到“cat”被 HTML 标签包围，而不是“cat Fish”，因为由于 HTML 标签现在存在于我正在构建的字符串中，所以它不匹配。知道如何解决这个问题并让“cat”和“catfish”被 HTML 标签包围(我不介意是否有“太多”标签，从视觉 Angular 来看其中一些标签毫无用处。

感谢您的帮助，祝您有美好的一天!

Answer 1

按字符串的大小对字典进行排序。先做“猫鱼”，然后再做“猫”...