我如何获得一个字符串，该字符串是元素的 text()，但在 div 之后添加了空格？

Question

JSFiddle 在这里

你好！我正在尝试从元素的 .contents().text() 输出一个字符串......但每个 div 的内容之间有空格（不改变实际的 DOM）。

HTML:

<!-- I don't have control over how many divs are in .myTextArea, or what text. It's really dynamic. There are also lists, etc.--tons of different types of elements. -->

<div class="myTextArea">

  <div>Hey there!</div><div>I like turtles.</div><div>Do you like them?</div>

</div>

查询：

var myTextDescription = $(".myTextArea").contents().text();

console.log(myTextDescription);

目前，它输出：

Hey there!I like turtles.Do you like them?

...这就是我希望它输出的内容：相同的内容，但每个 div 的内容后有空格：

Hey there! I like turtles. Do you like them?

注意：关于 SO 的其他答案让您更改实际的 DOM（又名，他们在页面上的元素之后添加实际的空格），然后他们只获取 text() 字符串。我不想更改 DOM。

另外，我不能改用 .html() 并尝试去除一些东西，因为会有太多类型的元素需要担心。

JSFiddle 在这里

Answer 1

您快到了。替换.text()为：//get text content of all nodes.map((i,d) => d.textContent).get()//remove white space.filter(t => !!t.trim())//join the text from all nodes with a space.join(' ');查看下面的演示：var myTextDescription = $(".myTextArea").contents().map((i,d) => d.textContent).get().filter(t => !!t.trim()).join(' ');console.log(myTextDescription);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="myTextArea">&nbsp; <div>Hey there!</div><div>I like turtles.</div><div>Do you like them?</div></div>如果您需要排除 div 中的文本，例如使用类exclude，您可以:not()像这样使用 psedo 选择器：...&nbsp;.contents(':not(".exclude")')&nbsp;......如以下演示所示：var myTextDescription = $(".myTextArea").contents(':not(".exclude")').map((i,d) => d.textContent).get().filter(t => !!t.trim()).join(' ');console.log(myTextDescription);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="myTextArea">&nbsp; <div>Hey there!</div><div class="exclude">Please exclude this!</div><div>I like turtles.</div><div>Do you like them?</div><div class="exclude">Please exclude this too!</div></div>

Answer 2

解决此问题的一种方法是使用 JavaScript 的 querySelectorAll 方法返回 myTextArea 元素中所有 DIV 的列表。然后，您可以遍历列表中的每个元素，获取其 innerText 并在每个元素后放置一个空格：var myTexts = document.querySelectorAll('.myTextArea > div');var show = document.querySelector('#show');var output = "";for (var x = 0; x < myTexts.length; x++) {&nbsp; if (output == "") { // Skip adding space before first string&nbsp; &nbsp; output = myTexts[x].innerText;&nbsp; } else { // Add space before each appended string&nbsp; &nbsp; output += " " + myTexts[x].innerText;&nbsp; }}show.innerText = output;<div class="myTextArea">&nbsp; <div>Hey there!</div>&nbsp; <div>I like turtles.</div>&nbsp; <div>Do you like them?</div></div><div id="show"></div>