深入理解Chrome扩展中DOM操作：安全修改文本节点以保留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('');
});

// 可以根据需要修改主选择器，例如只针对特定的容器
let allElements = document.querySelectorAll("p, li, span, a"); // 示例：选择p, li, span, a等元素

allElements.forEach(element => {
    // 遍历当前元素的所有子节点
    // 注意：这里需要迭代的是 element.childNodes，因为我们关注的是文本节点
    // 如果直接对 element 进行操作，可能会跳过深层嵌套的文本
    // 更健壮的方法是递归遍历所有子节点
    element.childNodes.forEach(node => makeRandomBold(node));
});

/**
 * 递归函数，用于在文本节点中随机加粗字符
 * @param {Node} node 当前处理的DOM节点
 */
function makeRandomBold(node) {
    // 检查节点类型：nodeType === 3 表示这是一个文本节点
    if (node.nodeType === Node.TEXT_NODE) {
        let text = node.textContent; // 备份原始文本内容
        if (!text.trim()) return; // 如果是空白文本节点，则跳过

        node.textContent = ""; // 清空原始文本节点的内容

        text.split('').forEach(s => {
            // 排除空格，并根据随机数决定是否加粗
            if (s !== " " && Math.random() > .49) {
                let strong = document.createElement("strong");
                strong.textContent = s;
                // 在原始文本节点之前插入新的<strong>元素
                node.parentNode.insertBefore(strong, node);
            } else {
                // 如果不加粗或为空格，则插入一个普通的文本节点
                node.parentNode.insertBefore(document.createTextNode(s), node);
            }
        });
        // 注意：原始的文本节点 (node) 此时是空的，但它仍然在DOM中。
        // 如果需要完全移除它，可以在所有字符插入完成后执行 node.remove();
        // 但通常情况下，由于我们是在其前面插入，然后清空它，其存在不会造成太大影响。
        // 如果原始节点是唯一的文本节点，并且被完全替换，则可以考虑移除。
        // 在这个特定场景下，保留空节点通常无害，因为它已经被新的节点取代了视觉上的内容。
    } else if (node.nodeType === Node.ELEMENT_NODE) {
        // 如果是元素节点，则递归遍历其子节点
        // 确保不处理脚本、样式或注释等非内容节点
        if (node.tagName !== 'SCRIPT' && node.tagName !== 'STYLE' && node.tagName !== 'NOSCRIPT') {
            node.childNodes.forEach(child => makeRandomBold(child));
        }
    }
}

<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>