javascript - 用javascript将一个HTML节点分割为多个节点

Question

在 Javascript 中，我可以使用以下 HTML 代码 (.innerHTML) 访问 HTML-DOM 节点:

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>

重要提示:每个文本行都以中断符 <br> 结尾.

我想将每个文本行括在 <span class="myclass"></span> 中这样我就可以访问每一行，即根据中断将大节点分割为几个较小的节点。 Javascript 或 jquery 中有没有方法可以做到这一点？ 输出应该是:

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

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