Уберите все теги br с начала HTML-текста, пока следующий элемент не станет текстовым узлом Javascript или jQuery. - PullRequest
Новая
       9

Уберите все теги br с начала HTML-текста, пока следующий элемент не станет текстовым узлом Javascript или jQuery.

0 голосов
/ 11 июня 2018

Допустим, у меня есть этот код: 

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

Ответы [ 3 ]

0 голосов
/ 11 июня 2018

Хорошо. У вас есть другой вариант;в цикле получите html() вашего .element.преобразовать его в строку, а затем найти индекс text node.Теперь замените все <br> на ''.В конце замените .element.html() на новую строку, которую вы сделали.

0 голосов
/ 11 июня 2018

Node

Поскольку существует необходимость ссылаться на элементы и текст в DOM, мы будем использовать Node interface .При использовании интерфейса Node важно помнить, что узел - это элемент, текст, комментарии, документ или даже пробел.Пробел - это то, что делает обход DOM путем ссылки на узлы настолько трудным.Демонстрация ниже показывает нам способ использования списков узлов, отфильтровывает нужные элементы по условиям и правильно обрабатывает textNodes и пробелы.

Ниже приведен список свойств и методов, используемых в демонстрации:

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>
0 голосов
/ 11 июня 2018

напишите свой код следующим образом: 

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

теперь используйте этот цикл для удаления всех предыдущих br: 

$('.element').each(function () {
        var anchor = $(this).find('span:contains(text node)');
        anchor.prev("br").remove();
    });

вы можете использовать класс якоря вместо его текста, но с помощью якоряspan только для текста необходим, значит, если вы напишите <br> в якоре <span>, он не будет удален. Вы можете удалить якорный класс в этом коде, я его не использую.

...