I'm building an application where users highlight and scroll to words in an article they write in search bar. articles come in a Markdown format and I'm using a Markdown-it to render article body.
It works well except for if the word they search for is part of an image URL. it applies regular expression to it and image breaks.
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" >$&</span>`
)
return newText
}
}
Is there a way to exclude applying regex if it's an Image URL ?
CodePudding user response:
You can use
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" >' x '</span>'; })
return newText
}
}
Here,
new RegExp('(!\\[[^\\][]*]\\([^()]*\\))|' searchText.replace(/[-\/\\^$* ?.()|[\]{}]/g, '\\$&'), 'gi')
- creates a regex like(!\[[^\][]*]\([^()]*\))|hello
that matches and captures into Group 1 a string like![desc](value)
, or it matcheshellow
(if thesearchText
ishello
)..replace(regex, function(x, y) { return y ? y : '<span id="searchResult" >' x '</span>'; })
means that if Group 1 (y
) was matched, the return value isy
itself as is (no replacement is peformed), else, thex
(the whole match,searchText
) is wrapped with a span tag.replace(/[-\/\\^$* ?.()|[\]{}]/g, '\\$&')
is necessary to supportsearchText
that can contain special regex metacharacters, see Is there a RegExp.escape function in JavaScript?