从字符串正则表达式操作中排除markdown中的URL/Images

Question

我正在构建一个应用程序，用户可以在其中突出显示并滚动到他们在搜索栏中写的文章中的单词。文章采用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
}
}

如果regex是图像URL，有没有办法排除它的应用？

Answer 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的正则表达式，它匹配并捕获一个类似于![desc](value)的字符串到组1中，或者它匹配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>'; })表示，如果组1(y(匹配，则返回值为y本身(不进行替换(，否则，x(整个匹配，searchText(被span标签包裹
• .replace(/[-/\^$*+?.()|[]{}]/g, '\$&')是支持可以包含特殊regex元字符的searchText所必需的，请参阅JavaScript中是否有RegExp.escape函数