主页
博客
知识库
工作台
集萃
友链
关于

高亮显示 html 元素内的所有数字

更新于 2024-03-19

— 753 字

js
// 高亮显示数字
function highlightNumbers(element) {
  // 获取元素节点的文本内容
  let text = element.data;
  if(!text) return;
  // 使用正则表达式匹配数字
  let regex = /[\p{N}\u4e00一二三四五六七八九十]/ug;
  let matches = text.match(regex);
  if (matches) {
    // 遍历匹配到的数字
    for (

花园

花坛——博客
果园——知识库

工坊——作者开发的实用工具

小记
秒切——一键按秒分割视频
中国重点高校地理位置可视化网站
中国行政区划数据查询平台
excel 重命名工具

misc

生活章程
画廊
just have fun!

花野猫打造

let

i

=

0

;

i

<

matches

.

length

;

i

++

)

{

let number = matches[i];

// 创建一个带有高亮样式的 <span> 元素

let span = document.createElement('span');

span.innerHTML = number;

span.style.backgroundColor = 'yellow';

span.style.fontWeight = 'bold';

// 替换文本中的数字为带有高亮样式的 <span> 元素，重复的也要替换

text = text.replaceAll(number, span.outerHTML);

}

// 更新元素节点的文本内容

element.parentElement.innerHTML = text;

}

function traverseTextNodes(element) {

// 检查当前节点是否为文本节点

if (element.nodeType === Node.TEXT_NODE) {

highlightNumbers(element)

}

// 遍历当前节点的子节点

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

const childNode = element.childNodes[i];

// 递归调用遍历函数，处理子节点

traverseTextNodes(childNode);

}

traverseTextNodes(document.body);

更新于2023-12-07

Markdown 标题转换

更新于2024-08-08

A "typical website"

更新于2024-06-28

js 拾遗

更新于2023-12-07

高亮显示 html 元素内的所有数字

相关内容

DOM 拾遗

IPv4-mapped IPv6

相关内容

DOM 拾遗

IPv4-mapped IPv6

Markdown 标题转换

A "typical website"

js 拾遗

Markdown 标题转换

A "typical website"

js 拾遗