解决Chrome扩展程序中修改文本导致HTML结构和样式丢失的问题

let containers = document.querySelectorAll('p')
containers.forEach((container) => {
    let newtext = container.innerText.split('').map(
        m => Math.random() > .49 ? `<strong>`+ m + `</strong>` : m
    )
    container.innerHTML = newtext.join('')
})

/**
 * 遍历指定元素的所有子节点，并对其中的文本节点进行随机加粗处理。
 * @param {HTMLElement} element 要处理的HTML元素。
 */
function processElementTextNodes(element) {
    // 遍历当前元素的所有子节点
    element.childNodes.forEach(node => {
        makeRandomBold(node);
    });
}

/**
 * 对文本节点进行随机加粗处理。
 * 如果是元素节点，则递归处理其子节点。
 * @param {Node} node 待处理的DOM节点。
 */
function makeRandomBold(node) {
    // 1. 如果不是文本节点（nodeType !== 3），则递归处理其子节点
    if (node.nodeType !== 3) {
        // 确保是元素节点且有子节点才进行递归
        if (node.nodeType === 1 && node.childNodes.length > 0) {
            node.childNodes.forEach(child => makeRandomBold(child));
        }
        return; // 处理完子节点后返回
    }

    // 2. 备份文本节点原始内容并清空
    let text = node.textContent; // 获取文本节点的纯文本内容
    if (!text.trim()) { // 如果是空文本节点或只包含空格，则不处理
        return;
    }
    node.textContent = ""; // 清空文本节点内容

    // 3. 遍历文本内容的每个字符，并创建新节点插入
    text.split('').forEach(char => {
        if (char !== " " && Math.random() > .49) {
            // 如果字符不是空格且满足加粗条件，创建<strong>元素
            let strong = document.createElement("strong");
            strong.textContent = char;
            node.parentNode.insertBefore(strong, node); // 插入到原文本节点之前
        } else {
            // 否则，创建新的文本节点
            node.parentNode.insertBefore(document.createTextNode(char), node); // 插入到原文本节点之前
        }
    });
}

// 示例用法：选择所有元素并对其文本节点进行处理
// 注意：document.querySelectorAll("*") 会选择所有元素，可能影响性能。
// 建议根据实际需求选择更具体的选择器，例如 'p, li, span, h1, h2'
let allElements = document.querySelectorAll("p, li, span, a, h1, h2, h3, blockquote"); 
allElements.forEach(element => processElementTextNodes(element));

// 假设页面HTML结构如下：
/*
<h1>HTML Ipsum Presents</h1>

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em>  Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
  tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>

<ol>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis
    elit sit amet quam. Vivamus pretium ornare est.
</blockquote>

<h3>Header Level 3</h3>

<ul>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
</ul>
*/