将 html 标记放在字符串中的匹配项周围答案

【问题标题】：putting html tags around matches in a string将 html 标记放在字符串中的匹配项周围
【发布时间】：2016-01-26 01:03:04
【问题描述】：

我一直在寻找答案，但找不到适合我的特定用例的答案：由于 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 标签现在存在于我正在构建的字符串中。知道如何解决这个问题并让“猫”和“猫鱼”被 HTML 标签包围（我不介意是否有“太多”标签从视觉角度来看使其中一些无用。

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

【问题讨论】：

标签： javascript html regex

【解决方案1】：

按String 的大小对字典进行排序。先做“猫鱼”，再做“猫”……

【讨论】：

【解决方案2】：

您可以先运行cat fish 正则表达式替换。此处“dictionary”被转换为list以保持顺序。

您也可以使用$1 来引用匹配的文本：

var data = "cat fish";

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


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

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

    console.log(coloredString);
}

【讨论】：

【解决方案3】：

由于cat fish中包含cat，所以需要同时搜索，越长越好。

您可以按照 Martin 的建议将要突出显示的字符串放在一个数组中，但在 same 组中使用它们，并用| 分隔它们。

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，标签在同一个句子中没有重叠。

【讨论】：