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

Replace substring but not if between tags or in tag with javascript

本文关键字：替换 字符串 标签 javascript 之间 如果      更新时间：2023-09-26

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

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>。 这可能吗？

如果要避免使用强标记，请一步完成替换：

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

如果"item"在开始之前包含强，您仍然会遇到问题，但除此之外，您就不会有问题。

编辑：

假设您要匹配"这个"、"那个"和"另一个"。正则表达式或RegExp是 This|some|the other .奇怪的是，传递给new RegExp的字符串被解析为常规表达式。

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

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

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

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()方法应该分别派上用场。

要仅在标签之外进行搜索，您需要一个解析器，该解析器可以过滤掉所有 HTML 标签，并仅向您显示您可以搜索的标签之间的文本片段。 我不知道您的特定应用程序是如何工作的，但通常获取解析器的最佳位置是让浏览器为您解析 HTML，并仅在标签之间的结果文本节点上进行搜索。

我使用的解决方案！

： 
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 的代码。

多谢！我也对正则表达式有了更好的了解！

相关文章：