🌝目的

讲述需求

呃.....这件事情是接到一个需求：更替官网静态文本，有很多地方更换了，给我了一个word。
我看静态文本有几百行，大部分在p标签内。不管了梭一个方法去查一下。（我可不想一个一个查）

不过，话说回来貌似 ctrl+F 搜索也挺快的，不相同的就没有高亮颜色。
反正就是这几种方法（前提是你的产品没给你标注好）

✅代码

代码记录

获取父标签节点

const body = document.querySelector('.answer-content-wrapper')

合并节点内容

const textNodes = getTextNodes(body);

// 合并所有文本节点的文本内容
const mergedText = textNodes.map(node => node.textContent).join('');

// 打印合并后的文本内容
console.log(mergedText);

// 获取 <div> 元素内的所有文本节点
function getTextNodes(element) {
  const textNodes = [];

  function traverse(node) {
    if (node.nodeType === Node.TEXT_NODE) {
      textNodes.push(node);
    } else if (node.nodeType === Node.ELEMENT_NODE) {
      for (const childNode of node.childNodes) {
        traverse(childNode);
      }
    }
  }

  traverse(element);
  return textNodes;
}

比较新旧内容

const mergedText2 = '*********' // 新文本

// 按照自己的需求分 隔例如我的文本就是 'haha heihei'
const lines1 = mergedText.split(' '); 
const lines2 = mergeText2.split(' '); 

// 打印不同的行及其内容
for (let i = 0; i < lines1.length || i < lines2.length; i++) {
  if (lines1[i] !== lines2[i]) {
    console.log(`第 ${i + 1} 行不同：`);
    console.log(`   原: "${lines1[i]}"`);
    console.log(`   新: "${lines2[i]}"`);
  }
}

测试

<div class="text1">haha heihei enen</div>
<div class="text2">haha1 heihei enen1</div>

const text1 = document.querySelector('.text1')
const text2 = document.querySelector('.text2')

function getTextNodes(element) {
  const textNodes = [];
  function traverse(node) {
    if (node.nodeType === Node.TEXT_NODE) {
      textNodes.push(node);
    } else if (node.nodeType === Node.ELEMENT_NODE) {
      for (const childNode of node.childNodes) {
        traverse(childNode);
      }
    }
  }
  traverse(element);
  return textNodes;
}
const textNode1 = getTextNodes(text1);
const textNode2 = getTextNodes(text2);

// 合并所有文本节点的文本内容
const mergedText1 = textNode1.map(node => node.textContent).join('');
const mergedText2 = textNode2.map(node => node.textContent).join('');

// 打印合并后的文本内容
console.log(mergedText1);
console.log(mergedText2);

const lines1 = mergedText1.split(' '); 
const lines2 = mergedText2.split(' '); 

// 打印不同的行及其内容
for (let i = 0; i < lines1.length || i < lines2.length; i++) {
  if (lines1[i] !== lines2[i]) {
    console.log(`第 ${i + 1} 行不同：`);
    console.log(`   原: "${lines1[i]}"`);
    console.log(`   新: "${lines2[i]}"`);
  }
}

运行结果

🎦结语

注

仅仅是好奇有没有方法......就当自己的锻炼了，记录一下📝

有用，点个赞再走吧？ 👀

【JS】找出两个静态文本的不同之处

🌝目的

✅代码

测试

运行结果

🎦结语