Используя Javascript (и TreeWalker API, но не JQuery), я хотел бы извлечь каждый текстовый узел родительского узла <span> (который я хочу развернуть после) и обернуть каждое отдельное слово текстовых узлов <span> тег, содержащий все те же атрибуты, которые имел родительский узел. Если внутри родительского узла <span> есть какие-либо другие теги, они должны поддерживаться только в том виде, в каком они есть, и оставаться в правильном порядке во время восстановления предложения. Смотрите этот пример:
Если веб-страница имеет такую структуру:
<div>
...
<span id="x" style="w" class="z"> //parent node to unwrap
Lorem ipsum
<em> dolor sit </em>
amet
</span>
...
</div>
Я хотел бы получить такой результат:
<div>
...
<span id="x" style="w" class="z"> Lorem </span>
<span id="x" style="w" class="z"> ipsum </span>
<em> dolor sit </em>
<span id="x" style="w" class="z"> amet </span>
...
</div>
Я видел, что могу получить родителя основного<span> (который будет развернут) и вставлять каждый дочерний узел перед ним (с методом insertBefore ()), но я не знаю, как перебрать его дочерние узлы, обернуть каждое отдельное слово текстового узла новым тегом <span>и поддерживать порядок узлов, как показано в примере. Не могли бы вы мне помочь? Спасибо!