效果见 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;
});
}
});