JQuery переносить каждое слово строки в span, если оно не переносится

Question

У меня есть строка

<div id="title">Lorem <span class="bold">ipsum</span> dolor sit amet</div>

Я хочу обернуть каждое развернутое слово в #title контейнер с span. Результат должен быть:

<div id="title"><span>Lorem </span><span class="bold">ipsum</span><span> dolor</span><span> sit</span><span> amet</span></div>

То, что я пробовал, и оно не сработало правильно - переносит первое слово, но отображает последние три слова в одном и том же <span>:

$('#title')
        .contents()
        .filter(function() {
            return this.nodeType === 3;
        })
        .wrap( "<span></span>" );

Answer 1

Поскольку последние три слова являются содержимым одного текстового узла, вы не можете сделать это таким образом, вместо этого вы должны разделить и обернуть содержимое. Вы можете использовать метод replaceWith() и вернуть массив содержимого HTML.

$('#title')
  .contents()
  .filter(function() {
    return this.nodeType === 3;
  }).replaceWith(function() {
    return this.nodeValue.split(/(?=\b\s)/).map(str => `<span>${str}</span>`)
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="title">Lorem <span class="bold">ipsum</span> dolor sit amet</div>