用<span>标签</span>包裹子字符串<span>（带嵌套）</span>

Question

I have a function that wraps parts of a given string with < span> tag depending on search sub-string.

Eg:

"Then came the night of the first falling star."

it will return (and it's ok):

"Then came the night < span>of< /span> the < span>first< /span> falling star".

for the "first of" search string. If we try search string "first of rs" (notice that "rs" contains in "fi RS t" that has already existed in our search string) and now it gives:

"Then came the night < span>of< /span> the < span>fi< span>rs< /span>t< /span> falling star".

But what we want to see is the first result:

"Then came the night < span>of< /span> the < span>first< /span> falling star".

 const markSubstring = (string, searchString) => { _.forEach(searchString.split(' '), function(value){ if(value != '') { let regEx = new RegExp('(' + value + ')', "ig"); string = string.replace(regEx, '<span>$1</span>'); } }); return _.map(string.split(/(<span>.*?<\\/span>)/), (item, key) => { let val = item.split(/<span>(.*?)<\\/span>/); if (val.length == 3) { return `<span>${val[1]}</span>` } return `${val}`; }); }; console.log(markSubstring('Then came the night of the first falling star.', 'first of')); console.log('---------'); console.log(markSubstring('Then came the night of the first falling star.', 'first of rs')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script> 

What is the best way to modify the function to get an expected result?

UPDATE

Given string: Then came the night of the first falling star.

Some search queries and their expected results:

came -> Then (came) the night of the first falling star.

came first -> Then (came) the night of the (first) falling star.

am ig first -> Then c(am)e the n(ig)ht of the (first) falling star.

first rs -> Then came the night of the (first) falling star.

first rs am -> Then c(am)e the night of the (first) falling star.

etc.

So we divide search string by spaces and try to find each of these "sub-search queries" in the given string.

With new RegExp('(' + value + ')', "ig"); we have a one < span> displayed as a text in a string when search is nesting (not just styles that it has). So the best option, I suppose, not to put it when the word (or its part has already highlighted).

Answer 1

Edit

OK I added the following logic to perfect it.

1. Sort all search words by length so that the longest word gets searched first. This way if a shorter word is searched, but is already contained as part of a longer one (that has been wrapped with <span> ), we know not to insert another span.
2. We split each word from the string and make sure it hasn't already been wrapped with a <span>

---

You can fix it by making sure each word is a full word and not part of another word.

For example if we use the regex pattern: /(^|\\s)(first)(\\s|$)/gi we make sure that the word first must be followed by a space, beginning or end of a string. Therefore the word rs cannot be considered a word in this case.

See it in action:

 const markSubstring = (string, searchString) => { var searchStrings = searchString.split(' ').sort(function(a, b){return b.length - a.length;}); _.forEach(searchStrings, function(value){ if(value != '') { let regEx = new RegExp('(' + value + ')', "ig"); let validationRegEx = new RegExp('<span>.*?(' + value + ').*?<\\/span>', "ig"); var words = []; _.forEach(string.split(' '), function(word) { if (!word.match(validationRegEx)) { word = word.replace(regEx, '<span>$1</span>'); } words.push(word); }) string = words.join(' '); } }); return _.map(string.split(/(<span>.*?<\\/span>)/), (item, key) => { let val = item.split(/<span>(.*?)<\\/span>/); if (val.length == 3) { return `<span>${val[1]}</span>` } return `${val}`; }); }; console.log(markSubstring('Then came the night of the first falling star.', 'first of')); console.log('---------'); console.log(markSubstring('Then came the night of the first falling star.', 'first of rs')); console.log('---------'); console.log(markSubstring('Then came the night of the first falling star. rs is also a word.', 'first of rs')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>