前端 高亮关键词

高亮关键词

text 需要高亮的关键词 dom 需要高亮的dom元素

highlightText(text,dom) {
      // const body = document.body;
      const regex = new RegExp(text, 'gi');
      let match;
    
      const nodesToHighlight = [];
    
      const walker = document.createTreeWalker(dom, NodeFilter.SHOW_TEXT, {
        acceptNode: function(node) {
          if (node.parentNode.nodeName.match(/^(script|style)$/i)) {
            return NodeFilter.FILTER_REJECT;
          }
          return NodeFilter.FILTER_ACCEPT;
        }
      }, false);
    
      while (walker.nextNode()) {
        const node = walker.currentNode;
        if (node.parentNode.classList.contains('highlight-current-section')) {
          continue;
        }
        while ((match = regex.exec(node.nodeValue))) {
          const span = document.createElement('span');
          // span.style.backgroundColor = 'yellow';
          span.classList.add('highlight-current-section')
          span.textContent = match[0];
          const range = document.createRange();
          range.setStart(node, match.index);
          range.setEnd(node, regex.lastIndex);
          nodesToHighlight.push({ range, span });
          regex.lastIndex -= match[0].length - span.textContent.length;
        }
      }
    
      const shadowHosts = document.querySelectorAll('*');
      shadowHosts.forEach(shadowHost => {
        if (shadowHost.shadowRoot) {
          const shadowRoot = shadowHost.shadowRoot;
          const walker = document.createTreeWalker(shadowRoot, NodeFilter.SHOW_TEXT, {
            acceptNode: function(node:Node) {
              if (node.parentNode.nodeName.match(/^(script|style)$/i)) {
                return NodeFilter.FILTER_REJECT;
              }
              return NodeFilter.FILTER_ACCEPT;
            }
          }, true);
    
          while (walker.nextNode()) {
            const node = walker.currentNode;
            if (node.parentNode.classList.contains('highlight-current-section')) {
              continue;
            }
            while ((match = regex.exec(node.nodeValue))) {
              const span = document.createElement('span');
              // span.style.backgroundColor = 'yellow';
              span.classList.add('highlight-current-section')
              span.textContent = match[0];
              const range = document.createRange();
              range.setStart(node, match.index);
              range.setEnd(node, regex.lastIndex);
              nodesToHighlight.push({ range, span });
              regex.lastIndex -= match[0].length - span.textContent.length;
            }
          }
        }
      });
    
      nodesToHighlight.forEach(nodeToHighlight => {
        const range = nodeToHighlight.range;
        const span = nodeToHighlight.span;
        range.deleteContents();
        span.classList.add('highlight-current-section');
        range.insertNode(span);
      });
    },

添加高亮后移除关键词

removeHighlight() {
      const highlightedSpans = document.querySelectorAll('.highlight-current-section');
      highlightedSpans.forEach((span) => {
        var parentNode = span.parentNode;
        var childNodes = span.childNodes;
        var childNodesLen = childNodes.length;
        var nextSibling = span.nextSibling;
        for (var k = 0; k < childNodesLen; k++) {
          parentNode.insertBefore(childNodes[0], nextSibling);
        }
        var flagNode = document.createTextNode("");
        parentNode.replaceChild(flagNode, span);
        parentNode.normalize();
      })
    }

添加高亮的样式

  .highlight-current-section {
    background-color: #f1c40f !important;
  }