如何使用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选择器。
