1

我正在构建一个应用程序，用户在其中突出显示并滚动到他们在搜索栏中写的文章中的单词。文章采用Markdown格式，我使用Markdown-it来呈现文章正文。

它运行良好，除非他们搜索的词是图像 URL 的一部分。它将正则表达式应用于它并图像中断。

    applyHighlights() {
      let str = this.article.body
      let searchText = this.articleSearchAndLocate
      const regex = new RegExp(searchText, 'gi')
      let text = str
      if (this.articleSearchAndLocate == '') {
        return text
      } else {
        const newText = text.replace(
          regex,
          `<span id="searchResult" class="rounded-sm shadow-xl py-0.25 px-1 bg-accent font-semibold text-tint">$&</span>`
        )
        return newText
      }
    }

如果它是图像 URL，有没有办法排除应用正则表达式？

4

1 回答 1

1

您可以使用

applyHighlights() {
  let str = this.article.body
  let searchText = this.articleSearchAndLocate
  const regex = new RegExp('(!\\[[^\\][]*]\\([^()]*\\))|' + searchText.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'gi')
  let text = str
  if (this.articleSearchAndLocate == '') {
    return text
  } else {
    const newText = text.replace(
     regex, function(x, y) { return y ? y :
      '<span id="searchResult" class="rounded-sm shadow-xl py-0.25 px-1 bg-accent font-semibold text-tint">' + x + '</span>'; })
    return newText
  }
}

这里，

  • new RegExp('(!\\[[^\\][]*]\\([^()]*\\))|' + searchText.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'gi')- 创建一个(!\[[^\][]*]\([^()]*\))|hello匹配的正则表达式，并将一个类似于 的字符串捕获到第 1 组中![desc](value)，或者它匹配hellow（如果searchText是hello）。
  • .replace(regex, function(x, y) { return y ? y : '<span id="searchResult" class="rounded-sm shadow-xl py-0.25 px-1 bg-accent font-semibold text-tint">' + x + '</span>'; })表示如果第1y组y（xsearchText
  • .replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')必须支持searchText可以包含特殊正则表达式元字符，请参阅Is there a RegExp.escape function in JavaScript?
于 2021-12-26T22:33:51.270 回答