javascript - 删除 HTML 文本开头的所有 br 标签，直到下一个元素是文本节点 Javascript 或 jQuery

Question

假设我有这段代码:

<div class ="element">
  <br>
  <span>
    <br>
      <span>
       <br>
        text node
        <br>
      </span>
     <br>
  </span>
</div>

<div class ="element">
  <br>
  <span>
    <br>
    <br>
        text node
  </span>
</div>

我想循环每个具有“element”类的元素，并删除所有 br 标签，直到循环到达文本节点，然后停止删除 br ，代码如下所示:

<div class ="element">
  <span>
      <span>
        text node
        <br>
      </span>
      <br>
  </span>
</div>

<div class ="element">
  <span>
        text node
  </span>
</div>

更新

var stop2 = false;
var walk_the_DOM2 = function walk2(node, func) {
//func(node);
node = node.firstChild;


while (node && !stop2) {      
walk2(node, func);	

if(func(node)== true){
stop2 = true;
}
	
  node = node.nextSibling;  
	
}
};




$('.element').each(function(index, elem) {
var hh  = elem;
	
stop2 = false;
walk_the_DOM2(hh, function(el) {

if(el.tagName =="BR"){
alert(el.tagName);
$(el).css('display', 'none');	
}else if(el.tagName == undefined){

if($(el).text().replace(/^\s+|\s+$/g, '').replace(/(\r\n\t|\n|\r\t)/gm,"").length > 0){
alert($(el).text());
return true;
}
}	
});	
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<div class ="element">
  <br>
  <span>
    <br>
      <span>
       <br>
        text node
        <br>

      </span>
     <br>
  </span>
</div>

Answer 1

节点

---

由于需要引用 DOM 中的元素和文本，我们将使用 Node interface 。使用 Node 接口(interface)时，请务必记住，节点是元素、文本、注释、文档，甚至是空格。空格使得通过引用节点来遍历 DOM 变得如此困难。下面的 Demo 向我们展示了一种使用 NodeList 的方法，通过条件过滤出所需的元素，并正确处理 textNode 和空格。

以下是演示中使用的属性和方法列表:

querySelectorAll()

parentNode

nextSibling

nodeType

removeChild

textContent

test()

---

演示

演示中评论了详细信息

---

// Collect all .elements in a NodeList
var elements = document.querySelectorAll('.element');

/* for each .element...
|| Collect all of .element's <br>
*/
for (let i = 0; i < elements.length; i++) {
  var brs = elements[i].querySelectorAll('br');

  // for each <br> in the current .element...
  for (let j = 0; j < brs.length; j++) {

    // Find current <br>'s parent
    var parent = brs[j].parentNode;

    // Check what type of node is next after current <br>
    var textCheck = brs[j].nextSibling.nodeType;

    // if the next node is NOT a nodeType TEXT (3)... 
    if (textCheck !== 3) {

      //... Remove the current <br>...
      parent.removeChild(brs[j]);
    } else {

      /* ...but if the next node is a textNode,
      || use wsCheck function to see if it is only whitespace...
      */
      if (wsCheck(brs[j].nextSibling)) {

        //...if it is only whitespace then remove current <br>... 
        parent.removeChild(brs[j]);

        /*...otherwise if it is a textNode with text
        || remove current <br>
        || break out of the inner for loop and continue to the
        || outer for loop
        */
      } else {
        parent.removeChild(brs[j]);
        break;
      }
    }
  }
}

function wsCheck(node) {
  return !(/[^\t\n\r ]/.test(node.textContent));
}

<div class="element">
  <br>
  <span>
    <br>
      <span>
       <br>
        text node one
        <br>
      </span>
  <br>
  </span>
</div>

<div class="element">
  <br>
  <span>
    <br>
    <br>
        text node two
  </span>
</div>