1

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

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>ortrong>的结果字符串。这可能吗？

4

4 回答 4

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被解析为常规表达式。

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

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

于 2012-05-13T15:06:49.467 回答
1

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

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

于 2012-05-13T17:01:50.050 回答
0

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

于 2012-05-13T15:02:23.357 回答
0

我使用的解决方案！：

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

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

于 2012-05-15T00:12:33.807 回答