Блог

Главная - Вопросы по программированию - Как получить html элемента, но игнорируя дочерние теги, кроме тега br

Как получить html элемента, но игнорируя дочерние теги, кроме тега br

#javascript #html #jquery #dom

Вопрос:

 lt;div class="test"gt; Div Text lorem ipsum lt;brgt; lorem ipsum lt;p class="some_class"gt;Paragraph Content lt;brgt; tag and again child nested in it lt;spangt; span contentlt;/spangt;lt;/pgt;lt;/divgt;.

Я хочу получить html-код элемента div. Вот сложная часть, если я использую .html (), это также будет включать дочерние теги, которые lt;p class="some_class"gt;....lt;spangt;...lt;/spangt;...lt;/pgt; мне нужны только для тегов br. Как я могу этого достичь?

конечный результат должен выглядеть так:

Div Text lt;brgt; lorem ipsum lt;brgt; тег содержимого абзаца lorem ipsum и снова вложенный в него дочерний элемент содержимого span

Комментарии:

1. вам придется проанализировать результаты, и поскольку разбор html-плохая идея (html не является структурированным языком, что очень затрудняет анализ или поиск с помощью регулярных выражений), я бы предложил пойти другим путем

2. Почему вам нужны только lt;brgt; теги?. Если вам нужен только текст , присутствующий внутри div , вы можете использовать innerText то, что дает n вместо lt;brgt; .

Ответ №1:

Если вы хотите, чтобы внутри любого элемента присутствовал только текст, вы можете использовать innerText , но в результате вы упомянули, что вам нужен lt;brgt; тег. Таким образом, вы можете innerText сначала использовать, а затем заменить строку feed ( n ) lt;brgt; тегом.

 var divtext = document.getElementsByClassName('test')[0].innerText; console.log(divtext); console.log(divtext.replaceAll('n', 'lt;brgt;')); 
 lt;div class="test"gt; Div Text lorem ipsum lt;brgt; lorem ipsum lt;p class="some_class"gt;Paragraph Content lt;brgt; tag and again child nested in it lt;spangt; span contentlt;/spangt;lt;/pgt;lt;/divgt;

Ответ №2:

Вы можете использовать цикл JavaScript (while/for).

Вот живой пример.

 lt;!DOCTYPE htmlgt; lt;html lang="en"gt;  lt;headgt;  lt;titlegt;Get Children Content with br taglt;/titlegt;  lt;/headgt;  lt;bodygt;  lt;div id="test"gt; Div Text lorem ipsum lt;brgt; lorem ipsum lt;p class="some_class"gt;Paragraph Content lt;brgt; tag and again child nested in it lt;spangt; span contentlt;/spangt;lt;/pgt;lt;/divgt;.  lt;/bodygt;  lt;scriptgt;  // get all the content of the div tag  let test = document.getElementById("test");  let testData = test.innerHTML;   let finalText = "";   // this variable will decide to capture the lettes when captured in loop.  let capture = true;   // starting to over all the cahracter in the text content  for (let i = 0; i lt; testData.length; i  ) {  let recursive = false;  if (  testData.charAt(i) == "lt;" amp;amp;  testData.charAt(i   1) == "b" amp;amp;  testData.charAt(i   2) == "r"  ) {  // if lt;brgt; tag is receved skip 4 char and increment the i value  capture = true;  recursive = true;  } else if (testData.charAt(i) == "lt;") {  // if lt; is found stop capturing  capture = false;  } else if (testData.charAt(i) == "gt;") {  // if gt; is found start capturing but skip this iteration  capture = true;  }   // main capturing code  if (capture) {  if (testData.charAt(i) != "gt;") {  finalText = finalText   testData.charAt(i);  }  if (recursive) {  finalText =  finalText    testData.charAt(i   1)    testData.charAt(i   2)    testData.charAt(i   3);  i = i   3;  }  }  }  console.log(finalText);  lt;/scriptgt; lt;/htmlgt;
Метки: , ,