如何让所有孩子的文字以 ; 分隔在 JavaScript 中？
[英]How to get all children text separated by ; in javascript?
问题描述
I have a following problem:
我有以下问题：
I would like to get text from all children elements separated by semicolon.我想从以分号分隔的所有子元素中获取文本。
See following example:请参阅以下示例：
<div class="parent">
<div class="children 1"> </div>
<div class="children 2 ">TEXT 2</div>
<div class="children 3 ">TEXT 3</div>
<div class="children 4 ">TEXT 4</div>
</div>
I know, that I can use document.querySelector('.parent').textContent to get TEXT 2 TEXT 3 TEXT 4我知道，我可以使用document.querySelector('.parent').textContent来获取TEXT 2 TEXT 3 TEXT 4
But I would like to get TEXT 2;TEXT 3;TEXT 4 (note that before TEXT 2 is no semicolon because children 1 has no text)但我想得到TEXT 2;TEXT 3;TEXT 4 （注意，在 TEXT 2 之前没有分号，因为 children 1 没有文字）
Thanks for any help!谢谢你的帮助！
3 个解决方案
解决方案1
4 已采纳 2020-03-28 11:40:33
Using .children , you can get a HTMLCollection of the child elements to your .parent div.使用.children ，你可以得到的子元素的HTMLCollection您.parent股利。 You can then use Array.from() on the HTMLCollection to convert each child to its text value as well as to form an array from the HTMLCollection.然后，您可以在 HTMLCollection 上使用Array.from()将每个子项转换为其文本值，以及从 HTMLCollection 形成一个数组。 You can then use .filter(Boolean) to keep all values which are truthy (ie: non-empty strings), and then .join(';') to join each element in the array to a string using a semi-colon:然后，您可以使用.filter(Boolean)保留所有真实值（即：非空字符串），然后使用.join(';')将数组中的每个元素连接到使用分号的字符串：
const res = Array.from(document.querySelector('.parent').children, ({textContent}) => textContent.trim()).filter(Boolean).join(';'); console.log(res);
<div class="parent"> <div class="children 1"> </div> <div class="children 2">TEXT 2</div> <div class="children 3">TEXT 3</div> <div class="children 4">TEXT 4</div> </div>
解决方案2
0 2020-03-28 11:38:08
// Simple Solution // 简单的解决方案
const divs = [...document.querySelector(".parent").children];
const text = divs
.map(x => x.textContent)
.filter(x => (x || "").trim())
.join("'");
console.log(text);
// Better: // 更好的：
const divs = [...document.querySelector(".parent").children];
const result = divs.reduce((res, cur, index) => {
const text = cur.textContent.trim();
if (text) {
res += (res == "" ? text : `;${text}`);
}
return res;
}, "");
console.log(result);
const divs = [...document.querySelector(".parent").children]; let text = divs .map(x => x.textContent) .filter(x => (x || "").trim()) .join("'"); console.log(text); text = divs.reduce((res, cur, index) => { const text = cur.textContent.trim(); if (text) { res += (res == "" ? text : `;${text}`); } return res; }, ""); console.log(text);
<div class="parent"> <div class="children 1"> </div> <div class="children 2 ">TEXT 2</div> <div class="children 3 ">TEXT 3</div> <div class="children 4 ">TEXT 4</div> </div>
解决方案3
0 2020-03-28 12:01:19
Try this,尝试这个，
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ let fullText = []; $('.parent').children('div').each(function () { let childText = this.innerHTML; if(childText.trim().length) { fullText.push(childText); } }); console.log(fullText.join(";")); }); }); </script> </head> <body> <div class="parent"> <div class="children 1"> </div> <div class="children 2 ">TEXT 2</div> <div class="children 3 ">TEXT 3</div> <div class="children 4 ">TEXT 4</div> </div> <button>Join the children text</button> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.