JavaScript Split String Containing HTML On Each Tag

Question

So I have the below string in which I am trying to parse.

var text = '<div class="class" style="color:#666;font-size:12px"><strong style="font-size:12px;color:#123;font-weight:bold;">XXXXXXX</strong><br /><span>YYYYYYYYYYYYYYYYYY</span></div><div class="classL" style="color:#456;text-align:right;"><a style="color:#789" href="./abc/?id=1">ZZZZZZZ</a></div>'

I am thinking that it would need to be split out as it would be written like the so:

<div class="class" style="color:#666;font-size:12px">
<strong style="font-size:12px;color:#123;font-weight:bold;">XXXXXXX</strong>
<br />
<span>YYYYYYYYYYYYYYYYYY</span>
</div>
<div class="classL" style="color:#456;text-align:right;">
<a style="color:#789" href="./abc/?id=1">ZZZZZZZ</a>
</div>

And then each line would need to close off its tags so its complete:

<div class="class" style="color:#666;font-size:12px"></div>
<strong style="font-size:12px;color:#123;font-weight:bold;">XXXXXXX</strong>
<br />
<span>YYYYYYYYYYYYYYYYYY</span>
<div class="classL" style="color:#456;text-align:right;"></div>
<a style="color:#789" href="./abc/?id=1">ZZZZZZZ</a>

Then finally I would like to get the text of each line using something like the below:

jQuery(text[i]).text();

To end up with this:

XXXXXXX
YYYYYYYYYYYYYYYYYY
ZZZZZZZ

Also if its possible to keep the hyperlink ./abc/?id=1 that would be nice too.

Attempts

Initially I tried doing the following but realized that even though I could add the piece that I used to "split" on back to the string, I could not end up with each line being syntactically correct HTML which meant I could not use the jQuery select text function.

// Split Text Only
var textArraySplit = name.split(">");
var textArray = new Array();
for(var j = 0; j < textArraySplit.length-1; j++) {
  textArray.push(textArraySplit[j] + ">");
}

score 1 · Accepted Answer · answered Mar 19 '20 at 13:00

You can try the below code.

var text = '<div class="class" style="color:#666;font-size:12px"><strong style="font-size:12px;color:#123;font-weight:bold;">XXXXXXX</strong><br /><span>YYYYYYYYYYYYYYYYYY</span></div><div class="classL" style="color:#456;text-align:right;"><a style="color:#789" href="./abc/?id=1">ZZZZZZZ</a></div>'

let parser = new DOMParser()
let _document = parser.parseFromString(text, "text/html")

let _body = _document.getElementsByTagName("body")[0]

let rec = (children) => {
  for (let i=0; i<children.length ; i++) {
    let child = children[i]
    if (child.children.length) {
      rec(child.children)
    }
    else if(child.innerText.length > 0) {
    console.log(child.innerText)
    }
  }
}

rec(_body.children)

score 0 · Answer 2 · answered Mar 19 '20 at 03:43

0

Your best bet is probably to create a DOM element and extract the text. See this answer: Extract the text out of HTML string using JavaScript

answered Mar 19 '20 at 03:43

Lucas D

460
1
4
15

JavaScript Split String Containing HTML On Each Tag

2 Answers2