如何用JavaScript或jQuery将HTML文本节点包裹进p标签？-html教程-PHP中文网

如何用JavaScript或jQuery将HTML文本节点包裹进p标签？

碧海醫心

发布： 2025-02-21 22:22:58

原创

753人浏览过

如何使用javascript或jquery将html文本节点包裹在标签中？

如何用JavaScript或jQuery将HTML文本节点包裹进p标签？

挑战： 处理一段HTML代码，其中文本节点“ab”、“cd”和“ef”没有被或标签包裹。目标是使用原生JavaScript或jQuery将这些文本节点分别提取出来，并用标签包裹，最终HTML结构如下所示：

<code class="html"><p></p><p>ab</p>@@##@@<p>cd</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a>”；</p>@@##@@<p>ef</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1655">
                            <img src="https://img.php.cn/upload/ai_manual/000/969/633/68b6d69663ee2218.png" alt="有道小P">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1655">有道小P</a>
                            <p>有道小P，新一代AI全科学习助手，在学习中遇到任何问题都可以问我。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="有道小P">
                                <span>64</span>
                            </div>
                        </div>
                        <a href="/ai/1655" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="有道小P">
                        </a>
                    </div>
                </code>

登录后复制

原生JavaScript解决方案：

<code class="javascript">// 假设'parent'指向包含文本节点的父元素
let parent = document.getElementById('xxx'); 

// 获取所有子节点，转换为数组
let list = Array.from(parent.childNodes);

// 遍历每个子节点
list.forEach(item => {
    // 检查是否是文本节点
    if (item.nodeType === Node.TEXT_NODE && item.nodeValue.trim() !== '') { // 添加nodeValue.trim() !== ''避免处理空文本节点
        // 创建一个新的<p>元素
        let newP = document.createElement('p');
        // 设置<p>元素的文本内容
        newP.textContent = item.nodeValue.trim(); // 使用textContent避免潜在的innerHTML安全问题
        // 用新的<p>元素替换文本节点
        parent.replaceChild(newP, item);
    }
});</code>

登录后复制

jQuery解决方案：

<code class="javascript">// 假设'parent'指向包含文本节点的父元素
let $parent = $('#xxx');

// 获取所有子节点，转换为数组
let list = Array.from($parent.contents());

// 遍历每个子节点
list.forEach(item => {
    // 检查是否是文本节点
    if (item.nodeType === Node.TEXT_NODE && item.nodeValue.trim() !== '') { // 添加nodeValue.trim() !== ''避免处理空文本节点
        // 使用jQuery包裹文本节点
        $(item).wrap('<p></p>');
    }
});</code>

登录后复制

改进说明: 以上代码都添加了item.nodeValue.trim() !== ''的判断，避免了对空文本节点进行处理，提高了代码的健壮性。同时，原生JavaScript版本使用了textContent代替innerHTML来设置元素的内容，这更安全，避免了潜在的跨站脚本攻击风险。

这两个解决方案都实现了同样的目标，选择哪个取决于你的项目偏好和对原生JavaScript或jQuery的熟悉程度。记住，#xxx需要替换为实际的父元素ID选择器。