HTML页面文本处理：提取单字符串及替换文本为'A'的实现方法

1. 将页面所有文本转为单个字符串并保留CSS样式 #

方案A：获取完整HTML字符串（保留所有样式结构） #

如果需要完整保留页面的样式和结构，直接获取整个文档的HTML代码即可。若页面依赖外部样式表，需要先把外部样式转为内部样式再获取：

// 注入外部样式表到页面（仅页面使用外部CSS时需要）
async function embedExternalStyles() {
  const styleSheets = Array.from(document.styleSheets);
  for (const sheet of styleSheets) {
    if (sheet.href) {
      const res = await fetch(sheet.href);
      const css = await res.text();
      const styleTag = document.createElement('style');
      styleTag.textContent = css;
      document.head.appendChild(styleTag);
      sheet.ownerNode.remove();
    }
  }
}

// 获取带所有样式的完整HTML字符串
embedExternalStyles().then(() => {
  const fullHtml = document.documentElement.outerHTML;
  console.log(fullHtml);
});

如果页面只有内联样式或内部<style>标签，直接用document.documentElement.outerHTML就能拿到包含样式的完整字符串。

方案B：提取文本并关联样式标记 #

如果只需要文本内容，但要保留每个文本块的样式信息，可以遍历文本节点，结合计算样式生成带标记的字符串：

function getStyledTextString() {
  let output = '';
  const textWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
  let currentNode;
  
  while (currentNode = textWalker.nextNode()) {
    const parentEl = currentNode.parentElement;
    if (!parentEl) continue;
    
    // 获取元素的计算样式
    const style = window.getComputedStyle(parentEl);
    // 提取关键样式信息（可根据需求调整）
    const styleMark = `[${style.fontWeight} ${style.fontSize} ${style.color}]`;
    // 拼接样式标记和文本
    output += `${styleMark}${currentNode.textContent.trim()} `;
  }
  
  return output.trim();
}

const styledText = getStyledTextString();
console.log(styledText);

2. 替换元素文本为"A"，跳过含子元素的div #

核心逻辑：遍历页面元素，只替换没有子HTML元素的节点文本，包含子元素的div直接跳过。

实现代码 #

function replaceTextWithA() {
  const allElements = document.body.querySelectorAll('*');
  
  allElements.forEach(el => {
    // 跳过脚本和样式标签
    if (['SCRIPT', 'STYLE'].includes(el.tagName)) return;
    
    // 判断元素是否包含非文本/注释的子节点（即有HTML子元素）
    const hasHtmlKids = Array.from(el.childNodes).some(node => {
      return node.nodeType !== Node.TEXT_NODE && node.nodeType !== Node.COMMENT_NODE;
    });
    
    // 如果是div且有HTML子元素，直接跳过
    if (el.tagName === 'DIV' && hasHtmlKids) return;
    
    // 替换所有非空文本节点为"A"
    const textNodes = Array.from(el.childNodes).filter(n => n.nodeType === Node.TEXT_NODE);
    textNodes.forEach(textNode => {
      if (textNode.textContent.trim()) {
        textNode.textContent = 'A';
      }
    });
  });
}

// 执行替换
replaceTextWithA();

效果验证 #

原页面代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My Document</title>
  </head>
  <body>
    <h1>This is some text</h1>
    <h2>This is some smaller text</h2>
    <h3>This is even smaller text</h3>
    <div id="some-important-id">
       <div id="something"></div>
    </div>
  </body>
  <script>
    replaceTextWithA();
  </script>
</html>

执行后，body内容变为：

<h1>A</h1>
<h2>A</h2>
<h3>A</h3>
<div id="some-important-id">
  <div id="something"></div>
</div>

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