Subdivide a HTML node into several nodes with javascript

Question

In Javascript, I have access to a HTML-DOM-node with the following HTML-code (.innerHTML):

Some Text <b class="first">some other text</b> <a href="link">even more  text</a> text <b><span class="second">text text</span></b> and <span class="third">more text</span>text<br>
Some Text <b class="first">some other text</b> <a href="link">even more text</a> text <b><span class="second">text text</span></b> and <span class="third">more text</span>text<br>
Some Text <b class="first">some other text</b> <a href="link">even more text</a> text <b><span class="second">text text</span></b> and <span class="third">more text</span>text<br>
Some Text <b class="first">some other text</b> <a href="link">even more text</a> text <b><span class="second">text text</span></b> and <span class="third">more text</span>text<br>
Some Text <b class="first">some other text</b> <a href="link">even more text</a> text <b><span class="second">text text</span></b> and <span class="third">more text</span>text<br>
Some Text <b class="first">some other text</b> <a href="link">even more text</a> text <b><span class="second">text text</span></b> and <span class="third">more text</span>text<br>
<script>
    ...
</script>
    <script type="text/javascript">
   ...
    </script>

<script type="text/javascript">
 ...

</script>

Important: each text-line ends with a break <br>.

I want to enclose each textline in a <span class="myclass"></span> such that I can access each line, i.e., subdivide the big node into several smaller nodes with respect to the breaks. Is there a method in Javascript or jquery to do this? Output should be:

<span class="myclass">Some Text <b class="first">some other text</b> <a href="link">even more text</a> text <b><span class="second">text text</span></b> and <span class="third">more text</span>text<br></span>
<span class="myclass">Some Text <b class="first">some other text</b> <a href="link">even more text</a> text <b><span class="second">text text</span></b> and <span class="third">more text</span>text<br></span>
<span class="myclass">Some Text <b class="first">some other text</b> <a href="link">even more text</a> text <b><span class="second">text text</span></b> and <span class="third">more text</span>text<br></span>
<span class="myclass">Some Text <b class="first">some other text</b> <a href="link">even more text</a> text <b><span class="second">text text</span></b> and <span class="third">more text</span>text<br></span>
<span class="myclass">Some Text <b class="first">some other text</b> <a href="link">even more text</a> text <b><span class="second">text text</span></b> and <span class="third">more text</span>text<br></span>
<span class="myclass">Some Text <b class="first">some other text</b> <a href="link">even more text</a> text <b><span class="second">text text</span></b> and <span class="third">more text</span>text<br></span>
<script>
    ...
</script>
    <script type="text/javascript">
   ...
    </script>

<script type="text/javascript">
 ...

</script>

Adam Popkiewicz · Accepted Answer · 2016-08-05 12:45:24Z

1

// I assume you can have your content here
var div = document.getElementById('divWithContent');
// filter out script nodes
var tmp = document.createElement('div');
for (var i=0;i<div.childNodes.length;i++) {
  var item = div.childNodes.item(i);
  if (!(item.nodeType === 1 && item.nodeName === 'SCRIPT')) {
    var tmp2 = item.cloneNode();
    tmp2.innerHTML = item.innerHTML;
    tmp.appendChild(tmp2);
  }
}
// split by <br> and wrap in <span>
var lines = tmp.innerHTML.split('<br>').filter(function(x){
  return x && x.trim() != ''
});
tmp.innerHTML = lines.map(function(x){
  return '<span class="myWrap">' + x + '<br></span>'
}).join('\n');
console.log(tmp.innerHTML);
// if you're happy with result you can place it where you want
div.innerHTML = tmp.innerHTML;

edited Aug 5, 2016 at 12:45

answered Jul 27, 2016 at 14:24

Adam Popkiewicz

1051 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Texmex Over a year ago

Oh yes thank you very much, I got closer to the desired output, but your method eliminates some text. I get:

<span class="myWrap">Some Text <b class="first"></b> <a href="link"></a> text <b></b> and <span class="third"></span>text<br></span>

instead of

<span class="myWrap">Some Text <b class="first">some other text</b> <a href="link">even more text</a> text <b><span class="second">text text</span></b> and <span class="third">more text</span>text<br></span>

Texmex Over a year ago

I've found the error. item.cloneNode() does not clone the innerHTML of some nodes. It works with: var tmp2 = item.cloneNode(); tmp2.innerHTML = item.innerHTML; tmp.appendChild(tmp2);

Adam Popkiewicz Over a year ago

good! not sure about between browsers portability but should work otherwise

Collectives™ on Stack Overflow

Subdivide a HTML node into several nodes with javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related