Javascript разделен пробелами, но не внутри html-тегов

Question

Моя первая цель - разделить строку пробелами, но не те, что указаны в html-тегах.

Я попытался переписать следующее, но безуспешно: Javascript split by spaces but not those in quotes

Что бы регулярное выражение выглядеть в: обр = fullHtmlString.split (? ); ?

---

Моя основная цель - перенести IMG-тег на одно место за раз. После этого я буду перебирать массив, искать img-тег, удалить его и добавить его в следующий элемент и, наконец, присоединиться к массиву.

Код, который я использую на данный момент, является довольно всеобъемлющим и широко использует jQuery для достижения цели.

Вход:

<div> 
    <p><img class=something>Some text.</p> 
    <p>Some more text.</p> 
</div> 

Deisred выход первый раз:

<div> 
    <p>Some<img class=something> text.</p> 
    <p>Some more text.</p> 
</div> 

... второй раз:

<div> 
    <p>Some text.<img class=something></p> 
    <p>Some more text.</p> 
</div> 

... третий раз:

<div> 
    <p>Some text.</p> 
    <p><img class=something>Some more text.</p> 
</div> 

Answer 1

Вы не должны пытаться делать это с помощью регулярного выражения, why explained here.

Вы можете использовать DOM свойства и методы, хотя

function run(){ 
 
    var img = document.querySelector(".something"), 
 
    sibling = img, 
 
    parent = img.parentNode, 
 
    next = parent.nextElementSibling; 
 

 
    //Search for the next textNode 
 
    while((sibling = sibling.nextSibling) && sibling.nodeType !=3); 
 

 
    if(sibling) { 
 
    //split the text only once, 
 
    //so "some more text" becomes ["some","more text"] 
 
    var textParts = sibling.textContent.split(/ (.*)?/,2); 
 

 
    //put the first split item before the sibling 
 
    parent.insertBefore(document.createTextNode(textParts[0]+" "),sibling); 
 

 
    //replace the sibling with the img element 
 
    parent.replaceChild(img,sibling); 
 

 
    //finally if there was more text insert it after the img 
 
    textParts[1] && parent.insertBefore(document.createTextNode(textParts[1]),img.nextSibling);  
 
    } else if(!sibling && next) { 
 
    //no sibling in the current parent, 
 
    //so prepend it to the next available element in parent 
 
    next.insertBefore(img,next.firstChild); 
 
    } else { 
 
    clearInterval(timer); 
 
    } 
 
} 
 

 
var timer = setInterval(run,2000);

<div> 
 
    <p><img class="something" src="http://placehold.it/10x10">Some text.</p> 
 
    <p>Some <span>skip me</span> more text.</p> 
 
</div>