How to get html of element but ignoring children tags except br tag-CodePudding

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

I want to get html of div element. Here is tricky part, If i use .html() this will also include children tags which is <p >....<span>...</span>...</p> I only need br tag. How can I achieve that.

final output should look like:

Div Text lorem ipsum <br> lorem ipsum Paragraph content <br> tag and again child nested in it span content

CodePudding user response：

If you want only text present inside any element, you can use innerText but you mentioned you required <br> tag in a result. So you can use innerText first, then replace line feed (\n) with <br> tag.

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

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

CodePudding user response：

Old school type code

Just looping through the characters like this

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

I just wrote a code for you If its work for you I will be happy.