如何使用javascript或jquery将html文本节点包裹在
标签中？
挑战： 处理一段HTML代码，其中文本节点“ab”、“cd”和“ef”没有被
或标签包裹。目标是使用原生JavaScript或jQuery将这些文本节点分别提取出来，并用
标签包裹，最终HTML结构如下所示：
ab
@@##@@cd
立即学习“Java免费学习笔记（深入）”；
@@##@@ef
原生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() !== ''避免处理空文本节点 // 创建一个新的元素 let newP = document.createElement('p'); // 设置
元素的文本内容 newP.textContent = item.nodeValue.trim(); // 使用textContent避免潜在的innerHTML安全问题 // 用新的
元素替换文本节点 parent.replaceChild(newP, item); }});
jQuery解决方案：
// 假设'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(''); }});
改进说明: 以上代码都添加了item.nodeValue.trim() !== ''的判断，避免了对空文本节点进行处理，提高了代码的健壮性。 同时，原生JavaScript版本使用了textContent代替innerHTML来设置
元素的内容，这更安全，避免了潜在的跨站脚本攻击风险。
这两个解决方案都实现了同样的目标，选择哪个取决于你的项目偏好和对原生JavaScript或jQuery的熟悉程度。 记住，#xxx需要替换为实际的父元素ID选择器。
以上就是如何用JavaScript或jQuery将HTML文本节点包裹进p标签？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1560711.html
微信扫一扫 
支付宝扫一扫 
