Question

假设我在网页DOM中有一个句子，当我检查它时，它由3个文本节点组成，后跟一些像BOLD或ITALIC这样的元素。我想将文本节点合并到一个文本节点，因为相邻的文本节点没有意义 - 没有理由拥有它们。有没有办法轻松合并它们？感谢

Answer 1

也许这会对你有所帮助：

var parentNode = document.getElementById('pelements');
var textNode = document.createElement('p');

while (parentNode.firstChild) {
  textNode.textContent += parentNode.firstChild.textContent;
  parentNode.removeChild(parentNode.firstChild);
}

parentNode.appendChild(textNode);

<div id="pelements">
    <p>A</p>
    <p>B</p>
    <p>C</p>
  </div>

Answer 2

这是可能的，但您需要指定父元素。应该可以遍历整个DOM和每个节点，但是如果你能避免这种情况，那就更好了。

nodes = document.body.childNodes;
nodesToDelete = [];

function combineTextNodes(node, prevText) {
    if (node.nextSibling && node.nextSibling.nodeType == 3) {
        nodesToDelete.push(node.nextSibling);
        return combineTextNodes(node.nextSibling, prevText + node.nodeValue);
    } else {
        return prevText + node.nodeValue;
    }
}

for (i = 0; i < nodes.length; i++) {
    if (nodes[i].nodeType == 3) {
        nodes[i].nodeValue = combineTextNodes(nodes[i], '');
    }
}

for (i = 0; i < nodesToDelete.length; i++) {
    console.log(nodesToDelete[i]);
    nodesToDelete[i].remove();
}

Answer 3

看来Node.normalize()确实在做您想要的。您可以参考：Node.normalize()

DOM中的相邻文本节点是否可以与Javascript合并？

3 个答案: