Question

我的第一个目标是用空格分割字符串，而不是用html标签分割字符串。

我试图重写以下内容，但未成功：Javascript split by spaces but not those in quotes

正则表达式会是什么样子： arr = fullHtmlString.split（？）; ？

我的主要目标是一次将IMG标签移动一个空格。之后，我将遍历数组，搜索img-tag，将其删除，然后将其添加到下一个项目中，最后加入数组。

我目前使用的代码非常全面，并且广泛使用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属性和方法

＆＃13;

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);

＆＃13;

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

＆＃13;

Javascript按空格分割，但不在html标签内

1 个答案: