分隔多个标签的innerHTML
分隔多个标签的innerHTML
提问于 2018-02-23 06:39:59
代码如下：
<div id="myid">
<div class="test">
<h3 class="h3_class">My Title</h3>
<p class="class_1_p">Text 1</p>
<p class="Sans-19px">
test text 3
</p>
</div>
</a>
</div>
<div class="test_light">
<blockquote class="test_text_final">
An example final text
</blockquote>
</div>
</div>可以使用以下代码获取内部HTML：
document.querySelector('div#myid').innerText有没有办法把文本和每个标签用逗号分开？
预期输出：
My Title,Text 1,test text 3,An example final text回答 4
Stack Overflow用户
回答已采纳
发布于 2018-02-23 06:56:40
下面是一个VanillaJS单行解决方案：
var text = document.querySelector('div#myid').innerText;
console.log(text.split('\n').filter(x => x).join(', '));<div id="myid">
<div class="test">
<h3 class="h3_class">My Title</h3>
<p class="class_1_p">Text 1</p>
<p class="Sans-19px">
test text 3
</p>
</div>
<div class="test_light">
<blockquote class="test_text_final">
An example final text
</blockquote>
</div>
</div>
Stack Overflow用户
发布于 2018-02-23 06:58:21
不是直接使用innerText。您需要做的是递归地迭代HTML，直到到达最后一个只有文本的叶子，然后返回每个叶子。
const root = document.querySelector('#myid');
const getTexts = (el, chunks = []) => {
if (el.nodeType === document.TEXT_NODE) {
return chunks.concat(el.data);
} else if (el.childNodes.length > 0) {
return Array.prototype.reduce.call(el.childNodes, (result, child) => getTexts(child, result), chunks);
}
return chunks;
}
console.log(getTexts(root));<div id="root">
<div id="myid">
<div class="test">
<h3 class="h3_class">My Title</h3>
<p class="class_1_p">Text 1</p>
<p class="Sans-19px">
test text 3
</p>
</div>
</div>
<div class="test_light">
<blockquote class="test_text_final">
An example final text
</blockquote>
</div>
</div>
正如您将注意到的，该函数还包括换行符(\n)和空格，如果需要，可以过滤掉它们。
该函数基本上遍历每个节点。如果它是TextNode，它将读取文本并将其添加到块中。如果不是，但它有孩子，那么它将递归到每个孩子。如果两者都不是，它只返回现有的块。
const root = document.querySelector('#root');
const getTexts = (el, chunks = []) => {
if (el.nodeType === document.TEXT_NODE) {
return chunks.concat(el.data);
} else if (el.childNodes.length > 0) {
return Array.prototype.reduce.call(el.childNodes, (result, child) => getTexts(child, result), chunks);
}
return chunks;
}
console.log(
getTexts(root).map(s => s.trim()).filter(Boolean)
);<div id="root">
<div id="myid">
<div class="test">
<h3 class="h3_class">My Title</h3>
<p class="class_1_p">Text 1</p>
<p class="Sans-19px">
test text 3
</p>
</div>
</div>
<div class="test_light">
<blockquote class="test_text_final">
An example final text
</blockquote>
</div>
</div>
Stack Overflow用户
发布于 2018-02-23 06:53:14
这个循环遍历#myid中的所有元素，如果文本输入大于0，它会添加到result中，然后给您一个警告，这是您想要的吗？
var result = "";
$("#myid *").each(function(index) {
if($(this).text().length > 0) {
result += $(this).text().replace(/(\r\n|\n|\r)/gm,"") + ",";
}
});
alert(result);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myid">
<div class="test">
<h3 class="h3_class">My Title</h3>
<p class="class_1_p">Text 1</p>
<p class="Sans-19px">
test text 3
</p>
</div>
</a>
</div>
<div class="test_light">
<blockquote class="test_text_final">
An example final text
</blockquote>
</div>
</div>
编辑:考虑使用Boris的解决方案。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48938397
复制相关文章
相似问题
腾讯云开发者
