CODEWITHSUNDEEP
javascriptjqueryhtmldomdom-manipulation
Texmex
Texmex

Reputation: 63

Subdivide a HTML node into several nodes with javascript

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>

Upvotes: 0

Views: 45

Answers (1)

Adam Popkiewicz
Adam Popkiewicz

Reputation: 105

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

Upvotes: 1

Related Questions