Question

所以我在这里编写了这段代码：

highlighter: function (item) {
    var parts = this.query.split(" ");
    var length = parts.length;
    for (var i = 0; i < length; i++){
        if(parts[i] != ""){
            item = item.replace(new RegExp('(' + parts[i] + ')', 'ig'), function ($1, match) {
                return '<strong>' + match + '</strong>'
            })
        }
    }

  return item;
}

它的作用是：

我有字符串item和字符串this.query
我在每个空格分割this.query，并将生成的子字符串放入parts[]

我的目标是使parts[]中item的每个字符串都以item = "This is some text"粗体显示。

所以，如果

this.query = "This some"

和

<strong>This</strong> is <strong>some</strong> text

我想要<strong>。

除非我在strong元素中获得匹配，否则这种方式非常有效。所以我只想更换ong>标签本身不匹配的匹配项。因为我得到的结果字符串包含trong>或{{1}}。这可能吗？

Answer 1

如果您想避开强标签，请一步完成更换：

item = item.replace(
    new RegExp(parts.join('|'), 'ig'),
    function (match) {
        return '<strong>' + match + '</strong>'
    }
)

如果“item”在开始之前包含strong，你仍会遇到问题，否则你就不会有问题。

编辑：

假设您要匹配“this”，“that”和“the other”。 正则表达式或RegExp就是This|some|the other。奇怪的是，传递给new RegExp的字符串被解析为常规的exrpession。

另一个需要注意的重要事项是item.replace(regex, callback)将替换找到的每个匹配，并为每个匹配调用callback(match, ...)的结果。传递给回调的第一个参数是正则表达式的整个匹配，而其余参数是匹配中的组。

如果您想了解更多信息，请阅读正则表达式。

Answer 2

因为在这些语言中没有原生的负面反馈，如果你想在替换时忽略标签，你需要匹配它们和自己替换，如下：

item = item.replace(
  new RegExp(
    "(<\\/?\\w+(\\s+\\w+(\\s*=\\s*(\"[^\"]*\"|'[^']*'|\\S+))?)*>)"
      + "|(" + parts.join("|") + ")",
    "ig"),
  function (match, tag, p2, p3, attributeValue, matchedText) {
    if (tag)
    {
      return tag;
    }

    return "<strong>" + matchedText + "<\/strong>";
  });

（无需循环）

请注意\w+只是元素类型名称或属性名称中允许的字符的近似值，而\s只是标记空格的近似值。

如果您将搜索词用作RegExp构造函数的字符串参数，则可能还必须转义搜索词。为此，如果您对此处所需的转义序列数感到困惑，请参阅JSX:regexp.js，其中String.prototype.regExpEscape()和RegExp.prototype.concat()方法应分别派上用场。

Answer 3

要仅在标记之外进行搜索，您需要一个可以过滤掉所有HTML标记的解析器，并且只为您提供可以搜索的标记之间的文本。我不知道您的特定应用程序是如何工作的，但通常获得解析器的最佳位置是让浏览器为您解析HTML并仅对标记之间生成的文本节点进行搜索。

Answer 4

我使用的解决方案！：

highlighter: function (item) {
    var parts = this.query.replace(/\s+/g, " ").replace(/^\s|\s$/g,"").split(/\s/);
    if( item.match(/(?:&[^;]*;)+/) != null){
        item = strip(item);
    }
    item = item.replace(
        new RegExp('(' + parts.join('|') + ')', 'ig'),
        function (_, match) {
            return '<strong>' + match + '</strong>'
        }
    )
    return item;
}

这就是我把这个功能变成了什么。第一行是在末尾和空间序列中去掉空格。这需要进行正确的拆分，否则荧光笔会突出显示所有空间。（只有你看过HTML才能看到）。接下来，我检查项目中是否有任何特殊字符。如果是这样，我使用此功能剥离它们：

function strip(html)
{
    var tmp = document.createElement("DIV");
    tmp.innerHTML = html;
    return tmp.textContent||tmp.innerText;
}

然后我做了替换部分，我使用了Eric的代码。

非常感谢！我也更了解正则表达式了！

替换子字符串，但如果在标记之间或在标记中使用javascript则不能

4 个答案:

编辑：