regex - Javascript split by spaces, but not within html-tags -


my first goal split string spaces, not ones within html-tags.

i've tried rewrite following, unsuccessfully: javascript split spaces not in quotes

what regex in: arr = fullhtmlstring.split(?); ?


my main goal shift img-tag 1 space @ time. after i'll iterate on array, search img-tag, remove it, , add next item, , join array.

the code use @ moment quite comprehensive , use jquery extensively achive goal.

input:

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

deisred output first time:

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

...second time:

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

...third time:

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

you should not try regular expression, why explained here.

you can use dom properties , methods though

function run(){    var img  = document.queryselector(".something"),     sibling = img,     parent  = img.parentnode,     next    = parent.nextelementsibling;      //search next textnode    while((sibling = sibling.nextsibling) && sibling.nodetype !=3);      if(sibling) {      //split text once,       //so "some more text" becomes ["some","more text"]      var textparts = sibling.textcontent.split(/ (.*)?/,2);        //put first split item before sibling      parent.insertbefore(document.createtextnode(textparts[0]+" "),sibling);        //replace sibling img element      parent.replacechild(img,sibling);        //finally if there more text insert after img      textparts[1] && parent.insertbefore(document.createtextnode(textparts[1]),img.nextsibling);        } else if(!sibling && next) {      //no sibling in current parent,       //so prepend 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>


Comments

Popular posts from this blog

jquery - How do you format the date used in the popover widget title of FullCalendar? -

asp.net mvc - SSO between MVCForum and Umbraco7 -

Python Tkinter keyboard using bind -