preface

There are many ways to highlight text in the front end. This paper mainly introduces two methods: label type and overlay type.

The reference code for this article is here

tabbed

As shown in the figure, tagging is mainly achieved by adding labels to the highlighted text and styling the tags.

The difficulty with this approach is that you can’t simply replace the highlighted text with string.prototype.repeat, because in real development, the words you want to highlight may contain other tags in the page code, or the highlighted text may be the keywords of some tags (a, span……). At this time, repeat appears weak. So the key point of implementation is that parsing must be done in the DOM tree, using THE DOM API to extract node by node content, so as to avoid matching HTML tags. When matching text crosses nodes, we should wrap the keywords contained in each node in separate tags.

As can be seen from the above, the scheme can be divided into two steps:

  1. Parse the DOM to determine whether the node content contains text that needs to be highlighted.

    Here we mainly Node. The prototype. TextContent and String. Prototype. IndexOf to obtain the location of the key word in the text.

    Recursive insertTag is used to constantly look for things in the node that need to be highlighted.

  2. Replace text nodes that need to be highlighted.

    In this case, the text.prototype.splitText method is used to separate the highlighted words from the original Text node. Replace by constructing a highlighted label that contains the same text.

That’s how tag highlighting is done.

overlay

Overlay works by calculating the position of the highlighted word on the page and creating a label with a highlighted style that covers the top (bottom) of the highlighted word.

The main difficulties of overlay highlighting are:

  1. How to position:

    Positioning in the text stream is actually to determine the location information of the start and end points of the highlight, and calculate the size and position of the insertion of the highlight label through the location information.

    This is done by looping in the Range before and after each word that needs to be highlighted.

    As shown in the figure, the child nodes are found recursively by iterating through sibling nodes.

  2. How to deal with the cross-line problem of highlighted words:

    What do we do when we encounter highlighted text crosses? Highlighted areas into an irregular shape, if when I was a child on a building blocks, this problem becomes simple, like this we can regard it as the shape of 3 pieces of rectangular blocks pieced together, the first behavior is a building block, middle lines (if any) for another building block, the rest of the last line is a building block.

    Use the getBoundingClientRect method to calculate the length, width, abscissa, and ordinate of the highlighted rectangle. The shape of the highlighted text can be obtained by comparing the starting and ending ordinates.

conclusion

Finally, a simple comparison of the characteristics of label type and cover type:

  • Tagging: The main advantage is that it works on text, can customize the style of the highlighted content in a variety of ways, and can be highlighted across paragraphs. The disadvantages are that the insertion logic is complex, the cost of re-highlighting text is high, and the sequence positioning of the highlighted text is difficult (the previous highlighted text, the next highlighted text…). .
  • Overlay type: mainly acts on the surface of text, ignoring the structure of DOM itself, which is convenient to locate and highlight text in sequence and easy to re-highlight. Because it is covered by positioning, it is easy to be affected by the external environment (anchor point change, text position change, line height change…). The effects of cross-paragraph highlighting are more difficult.

Do not spray rough writing, if there are mistakes or more highlighting solutions can be put forward to exchange, thank you for reading.