效果见 https://demo.cssworld.cn/new/11/3-4.php

原理

通过将一个带背景色的矩形方块覆盖在文字上来实现。例如，一段文本要实现搜索关键词高亮显示的效果，我们无须将匹配的文本用一个专门的标签包裹起来进行颜色设置，因为这会改动HTML的DOM结构，可以直接使用色块覆盖文字，然后设置混合模式为叠加。

代码

<p><input type="search" placeholder="输入内容回车搜索"></p>
<p id="target">可以在上面的输入框中输入任意这段内容中出现的文字或者单词，在输入内容并按回车键确认后，就会看到文字有高亮显示效果。但是，这种高亮显示效果不是通过包裹标签元素实现的，而是将色块直接覆盖在文字上面，然后通过叠加这种混合模式实现的。</p>

ui-overlay {
    position: absolute;
    background: red;
    mix-blend-mode: overlay;
    z-index: 9;
}

p {
    color: gray;
}

var eleSearch = document.querySelector('input[type="search"]');
var eleTraget = document.querySelector('#target');

eleSearch.addEventListener('input', function () {
    var text = eleTraget.textContent;

    [].slice.call(document.querySelectorAll('ui-overlay')).forEach(function (overlay) {
        overlay.remove();
    });

    // 匹配处理
    var value = this.value.trim();
    var length = value.length;

    if (!length) {
        return;
    }

    var arrMatchs = text.split(value);

    if (arrMatchs.length > 1) {
        var start = 0;
        arrMatchs.forEach(function (parts, index) {
            if (index == arrMatchs.length - 1) {
                return;
            }
            var range = document.createRange();
            start += parts.length;
            range.setStart(eleTraget.firstChild, start);
            range.setEnd(eleTraget.firstChild, start + length);

            var bound = range.getBoundingClientRect();

            var eleOverlay = document.createElement('ui-overlay');
            document.body.appendChild(eleOverlay);

            eleOverlay.style.left = bound.left + 'px';
            eleOverlay.style.top = (bound.top + window.pageYOffset) + 'px';
            eleOverlay.style.width = bound.width + 'px';
            eleOverlay.style.height = bound.height + 'px';

            start += length;
        });
    }
});

标签：范例,高亮,overlay,bound,length,eleOverlay,var,document,css
来源： https://blog.csdn.net/weixin_41192489/article/details/121129045