gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 06:26:55 24 4
gpt4 key购买 nike

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

最佳答案

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

关于javascript - 用javascript将一个HTML节点分割为多个节点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38608420/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com