如何逐字符识别动态创建div中带样式的字符？

要实现逐字符判断是否带有样式，核心思路是递归遍历目标div的所有节点，针对每个字符，对比其所在元素的计算样式与基准样式（父div的默认样式）的差异。以下是具体实现代码：

实现代码 #

function getDivStyle(id) {
  const targetDiv = document.getElementById(id);
  if (!targetDiv) return '';

  // 以父div的样式为基准，这里示例对比font-weight（对应<b>标签的加粗效果）
  const baseStyle = window.getComputedStyle(targetDiv);
  const baseFontWeight = baseStyle.fontWeight;

  let output = '';

  // 递归遍历所有节点
  const traverseNodes = (node) => {
    if (node.nodeType === Node.TEXT_NODE) {
      const textContent = node.textContent;
      if (!textContent) return;

      // 获取当前文本节点所在元素的计算样式
      const parentElement = node.parentElement;
      const currentStyle = window.getComputedStyle(parentElement);
      const hasCustomStyle = currentStyle.fontWeight !== baseFontWeight;

      // 逐字符处理，空格转为换行匹配示例格式
      for (const char of textContent) {
        if (char === ' ') {
          output += '\n';
        } else {
          output += `${char}: ${hasCustomStyle}\n`;
        }
      }
    } else if (node.nodeType === Node.ELEMENT_NODE) {
      // 递归处理子元素节点
      node.childNodes.forEach(traverseNodes);
    }
  };

  traverseNodes(targetDiv);
  console.log(output);
  return output;
}

代码说明 #

1. 基准样式对比：示例中以font-weight为判断依据（<b>标签会将字体加粗，默认font-weight为400，加粗后为700），你可以根据需求扩展对比其他样式属性（如color、font-style等），只需修改hasCustomStyle的判断条件：

   const hasCustomStyle = currentStyle.fontWeight !== baseFontWeight || 
                          currentStyle.color !== baseStyle.color ||
                          currentStyle.fontStyle !== baseStyle.fontStyle;
   

2. 节点遍历：通过递归遍历目标div的所有文本节点和元素节点，确保不会遗漏嵌套元素内的字符。
3. 格式匹配：将文本中的空格转为换行，与你期望的输出格式保持一致。

测试示例 #

对应HTML结构：

<div id="testing">H<b>i</b> I <b>a</b>m b<b>o</b>b</div>

调用getDivStyle("testing")后，输出结果：

H: false
i: true

I: false

a: true
m: false

b: false
o: true
b: false

内容的提问来源于stack exchange，提问作者Daniel