如何获取元素的html但忽略除br标签以外的子标签答案

【问题标题】：How to get html of element but ignoring children tags except br tag如何获取元素的html但忽略除br标签以外的子标签
【发布时间】：2021-12-26 01:01:52
【问题描述】：

<div class="test"> Div Text lorem ipsum <br> lorem ipsum <p class="some_class">Paragraph Content <br> tag and again child nested in it <span> span content</span></p></div>.

我想获取 div 元素的 html。这是棘手的部分，如果我使用 .html() 这还将包括子标签 .......... 我只需要 br 标签。我怎样才能做到这一点。

最终输出应如下所示：

Div Text lorem ipsum   lorem ipsum 段落内容  标签和嵌套在其中的子元素 span 内容

【问题讨论】：

您将不得不解析结果，并且解析 html 是一个坏主意（html 不是结构化语言，这使得使用正则表达式解析或查找非常困难），我会建议走不同的路线
为什么只需要  标签？如果您只需要 div 中存在的文本，则可以使用 innerText，它提供 \n 代替  。

标签： javascript html jquery dom

【解决方案1】：

如果您只想在任何元素中显示文本，则可以使用innerText，但您提到结果中需要  标记。所以你可以先使用innerText，然后用 标签替换换行符（\n）。

var divtext = document.getElementsByClassName('test')[0].innerText;
console.log(divtext);
console.log(divtext.replaceAll('\n', '<br>'));

&lt;div class="test"&gt; Div Text lorem ipsum &lt;br&gt; lorem ipsum &lt;p class="some_class"&gt;Paragraph Content &lt;br&gt; tag and again child nested in it &lt;span&gt; span content&lt;/span&gt;&lt;/p&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

您可以使用 JavaScript (while/for) 循环。

这是一个活生生的例子。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Get Children Content with br tag</title>
  </head>
  <body>
   <div id="test"> Div Text lorem ipsum <br> lorem ipsum <p class="some_class">Paragraph Content <br> tag and again child nested in it <span> span content</span></p></div>.
  </body>
  <script>
    //   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 < testData.length; i++) {
      let recursive = false;
      if (
        testData.charAt(i) == "<" &&
        testData.charAt(i + 1) == "b" &&
        testData.charAt(i + 2) == "r"
      ) {
        //   if <br> tag is receved skip 4 char and increment the i value
        capture = true;
        recursive = true;
      } else if (testData.charAt(i) == "<") {
        //   if < is found stop capturing
        capture = false;
      } else if (testData.charAt(i) == ">") {
        //   if > is found start  capturing but skip this iteration
        capture = true;
      }

      //   main capturing code
      if (capture) {
        if (testData.charAt(i) != ">") {
          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);
  </script>
</html>

【讨论】：