Highlight text in multiple <div> elements

Before you start - checklist

• I have read documentation in README
• I have checked sample and test suites to see real life basic implementation
• I have checked if this question is not already asked

What are you trying to achieve? Please describe. Hello! Thank you very much for this awesome react lib! I am currently using it with he annotation layer, and so far it works nicely! It finds the word pattern in the text and highlights it. But i would like to highlight e.g. multiple lines (where sometimes, these elements could be splited in different div elements in the text-layer).

Describe solutions you’ve tried

my current solution is the one that you have already mentioned on git hub! but it takes each elements of the layer and compares the text:

 const highlightPattern = (text, pattern) => {
  const splitText = text.split(pattern);

  if (splitText.length <= 1) {
    return text;
  }

  const matches = text.match(pattern);
  console.log(matches)
  return splitText.reduce((arr, element, index) => (matches[index] ? [
    ...arr,
    element,
    <mark key={uuid()}>
      {matches[index]}
    </mark>,
  ] : [...arr, element]), []);

So it will always compare the whole string in an element, correct?

Additional information Now a visual example to make it more appealing 😛 and now once i past the threshold to the “other div”.

searchstring: “Congratulations, your computer is equipped with a PDF (Portable Document Format) #reader”

Environment

• Browser (if applicable) [Firefox 59]:
• React-PDF version [e.g. 3.0.5]:
• React version [e.g. 16.3.2]:
• Webpack version (if applicable) [e.g. 4.8.3]:

Thanks in advance!

[taherbert]

I’m not sure I totally understand your request – are you trying to highlight multiple phrases, rather than just one? If so, this small modification to the recipe works for me:

  highlightPattern = (text, highlightWords) => {
    // This is the only major change -- rather than searching for a string, create a regex to search
    // for any strings in a provided array
    const regex = new RegExp(highlightWords.join('|'), 'gi')
    const splitText = text.split(regex)

    if (splitText.length <= 1) {
      return text
    }

    const matches = text.match(regex)

    return splitText.reduce(
      (arr, element, index) =>
        matches[index]
          ? [...arr, element, <mark>{matches[index]}</mark>]
          : [...arr, element],
      []
    )
  }

[taherbert]

Yes, highlightWords is an array of strings to highlight. Change your searchText to be an array instead of just a string.