Как я могу использовать массив слов и массив дочерних узлов для воссоздания абзаца?

Question

Я пытаюсь обернуть каждое отдельное слово в <span></span>, сохраняя все остальные узлы (ссылка, полужирный, и т. Д. c). Я успешно взял все слова на каждой странице и поместил их в массив, а также взял все дочерние узлы и поместил их в массив. Есть ли способ соединить этот параграф, чтобы все было в нужном месте (определенные слова внутри определенных тегов), используя эти два массива?

Вот мой код:

 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

Используя нативный JavaScript, эта функция должна делать то, что вы хотите. Я не знаком с jQuery, но это должно быть совместимо, так как это просто JS. Кроме того, это намного быстрее, чем установка внутреннего HTML.

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)

Answer 2

Этот ПОЧТИ работает. Однако он также заменяет URL в href, но, возможно, это не является проблемой для вашего указанного c текста

https://jsfiddle.net/mplungjan/k3o9t18g/

$('p').each(function () {
  var $this = $(this);
  $this.text()
    .split(/\s+/)
    .forEach(word => {
        console.log(word);
      $this.html($this.html().replace(word,`<span>${word}</span>`))
    });
});

span {
  outline: 1px solid orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  <strong>Lorem ipsum</strong> <i>sit amet</i> 
  <a href="#test">Curabitur vel bibendum leo</a> Duis eros nunc, aliquam
</p>

<p>The <b>quick</b> brown <a href="fox">fox</a> jumps 
over<br/> the <i>lazy dog</i></p>