javascript - 如何使用单词数组和子节点数组来重新创建段落？

Question

我试图将每个单词包装在 <span></span> 中同时保留所有其他节点(链接、粗体等)。我已成功获取每个页面上的所有单词并将它们放入一个数组中，并获取所有子节点并将它们放入一个数组中。有没有办法通过使用这两个数组将这段文字重新组合在一起，将所有内容放在正确的位置(某些标签内的某些单词)？

这是我的代码:

 p.each(function () {
    var current = $(this);

    var children = current.children().toArray();

    var text = current.text();

    var textNodes = text.split(' ');

    for (var i = 0; i < textNodes.length; i++) {
        this.childNodes[i].replaceChild(textNodes, this.childNodes[i]);
    }
});

Answer 1

使用 native JavaScript，该函数应该可以满足您的需求。我不熟悉 jQuery，但这应该是兼容的，因为它只是 JS。而且，这比设置innerHTML 快得多。

const walkChildrenAndWrapWordsInSpans = node => {
  if (node.nodeType === Node.TEXT_NODE) {
    const { parentElement } = node
    node.textContent
      .trim()
      .split(' ')
      .forEach(word => {
        let span = document.createElement("span");
        span.innerText = ' ' + word;
        parentElement.insertBefore(span, node);
      });
    parentElement.removeChild(node);
  }
  if (node.childNodes) {
    [...node.childNodes].forEach(walkChildrenAndWrapWordsInSpans);
  }
};

[...document.querySelectorAll('p')].forEach(walkChildrenAndWrapWordsInSpans)