不改变文档结构实时渲染彩虹字

马黑黑 · 发表于 2024-6-16 10:11

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2024-6-16 12:18 编辑

CSS+JS原生文本高亮API测试

代码：

<style>

#t7 { margin: 20px auto; padding: 10px; width: 800px; height: 400px; font-size: 20px; -webkit-user-modify: read-write-plaintext-only; border: 1px solid lightblue; border-radius: 3px; outline-width: 4px; outline-color: cornflowerblue; }

#h7 { text-align: center; }

</style>

<h2 id="h7">CSS+JS原生文本高亮API测试</h2>

const highlights = [];

const addStyleSheet = () => {

const colors = ['#ad26ad', '#5d0a99','#0000ff',' #07c607', '#b3b308', '#ffa500', '#ff0000'];

const hstr = colors.map((c,k) => `::highlight(rainbow-color-${k+1}) {color: ${c}; text-decoration: underline; }`).join('\n');

var style = document.createElement('style');

style.type = 'text/css';

style.innerHTML = hstr;

document.body.appendChild(style);

for (let i = 0; i < 7; i++) {

const colorHighlight = new Highlight();

highlights.push(colorHighlight);

CSS.highlights.set(`rainbow-color-${i + 1}`, colorHighlight);

}

};

const hlight = (ele) => {

const walker = document.createTreeWalker(ele, NodeFilter.SHOW_TEXT);

while(walker.nextNode()) {

let textNode = walker.currentNode;

let text = textNode.textContent;

for(let i = 0; i < text.length; i++) {

const range = new Range();

range.setStart(textNode, i);

range.setEnd(textNode, i + 1);

highlights[(i % 7)].add(range);

}

};

if (CSS.highlights) {

t7.textContent = '恭喜恭喜！您的浏览器完美支持CSS Custom Highlight API';

addStyleSheet();

hlight(h7);

hlight(t7);

t7.oninput = () => hlight(t7);

} else {

t7.textContent = '非常遗憾！您的浏览器不支持CSS Custom Highlight API'

}

</script>

马黑黑 · 发表于 2024-6-16 10:27

本帖最后由马黑黑于 2024-6-16 12:22 编辑

如果浏览器支持新的文本高亮渲染方式，一楼的测试中，彩虹字文本框可以输入文本，新输入的文本一样是彩虹的。

CSS Custom Highlight API 是个较新的标准接口，它提供一种全新理念的文本高亮特效，不改变文档树的结构，仅需事先定义好一组伪元素 ::highlight(名称)、再通过JS建立和注册文本高亮设定，便可对特定文本进行高亮渲染。目前火狐浏览器（Firefox）还没有能够实现该功能，其他现代浏览器新版本均已支持。

使用 CSS Custom Highlight API 有点繁琐，它需要一系列的配套操作，包含但不限于CSS的设置、创建高亮并在页面中注册、遍历文本节点、创建选区等等操作。

马黑黑 · 发表于 2024-6-16 10:34

传统的文本着色实现方法，都是以改变文档结构的方式完成，例如下面的文字：

花潮论坛

花潮两字都上彩，实现手段类似于：

<span style="color: red">花</span><span style="magenta">潮</span>论坛

文本节点中加入了两 span 元素节点，通过改变文档结构来实现给文本着色。

而 CSS Custom Highlight API 无需这么做，所以渲染性能提升100倍不止。

马黑黑 · 发表于 2024-6-16 11:15

::highlight() 伪元素支持的CSS属性有；

color
background-color
text-decoration 及其相关属性
text-shadow
-webkit-text-stroke-color、-webkit-text-fill-color 和 -webkit-text-stroke-width

马黑黑 · 发表于 2024-6-16 11:24

CSS Custom Highlight API 实现流程：

一、定义伪元素 ::highligh(custom-name) 样式
二、创建选区
三、创建高亮
四、注册高亮（到 custom-name 样式 )

其中，创建选区要遍历文档节点，找出要高亮的所有文本节点，而后一一为其创建高亮并注册（指定高亮样式）。