高亮显示字符串中的文本

Question

I have an algorithm which calculates the characters to highlight in text based on query.

For example, if I pass to the algorithm text "1000, Brussels, Belgium" and query "1000 bruss" it will return me [[0, 4], [6, 11]] . But now, I need to write an algorithm which will wrap the characters with <strong></strong> , so the result should be <strong>1000</strong>, <strong>Bruss</strong>els, Belgium . I wrote the algorithm, but i have a feeling it might be better or it might be solved more elegant.

const highlight = (content, query, matches) => {
  if (!query) {
    return content;
  }

  const openTag = "<strong>";
  const closeTag = "</strong>";

  let result = content;
  let shift = 0;

  matches.forEach(([startIndex, endIndex]) => {
    const s =
      openTag +
      result.slice(startIndex + shift, endIndex + shift) +
      closeTag +
      result.slice(endIndex + shift);

    if (shift) {
      result = result.slice(0, startIndex + shift) + s;
    } else {
      result = s;
    }

    shift += openTag.length + closeTag.length;
  });

  return result;
};

Is there any better way to solve the problem?

Another example:

• Text: 'Amsterdam, North-Holland, Netherlands'
• Query: 'amst'
• Matches: [0, 4]

Answer 1

You could sort the matches in ascending order, then you can just take the parts between the marches and concatenate them alltogether:

 const highlight = (content, matches) => {
   matches.sort(([a], [b]) => a - b);

  let result = "";
  let prevEnd = 0;
  for(const [start, end] of matches) {
    result += content.slice(prevEnd, start);
    result += "<strong>";
    result += content.slice(start, end);
    result += "</strong>";
    prevEnd = end;
  }
  result += content.slice(prevEnd);
  return result;
}

(This assumes that matches do not overlap, just like the OPs code)

---

Alternatively you can leave the replacement up to the regex engine:

 const result = content.replace(new RegExp(query.split(" ").join("|"), "g"), it => `<strong>${it}</strong>`);

Answer 2

Consider using mark.js

Replacing nodes in the DOM can be tricky and lead to unintended consequences as elements shift and fire events. Although it adds a third party dependency, it has a pretty clean API and abstracts away the logic so you don't have to own it.

 var instance = new Mark(".mark-context"); instance.mark("100 bruss"); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"></script> <p class="mark-context"> 1000, Brussels, Belgium </p> 

Answer 3

Another alternative can be to split the string into characters :

 var text = '1000, Brussels, Belgium', query = [[0, 4], [6, 11]], chars = [...text]; query.forEach(([from, to]) => { chars[from] = '<strong>' + chars[from]; chars[to] = '</strong>' + chars[to] }); document.body.innerHTML = chars.join('') console.log( chars ) 

Answer 4

You can use the power of Regular Expressions (RegEx) to do this! See the following function below, simply set string to the text you are searching through, and search to the text you want to find. In your case, string would be "1000, Brussels, Belgium" and search would be "1000 bruss"

function highlightString(string, search){
var regEx = new RegExp(search, 'g');
return str.replace(regEx, '<strong>'+search+'</strong>');

}