我如何获得一个字符串，该字符串是元素的 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">

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

</div>

如果您需要排除 div 中的文本，例如使用类exclude，您可以:not()像这样使用 psedo 选择器：

... .contents(':not(".exclude")') ....

..如以下演示所示：

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

  <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++) {

  if (output == "") { // Skip adding space before first string

    output = myTexts[x].innerText;

  } else { // Add space before each appended string

    output += " " + myTexts[x].innerText;

  }

}

show.innerText = output;

<div class="myTextArea">

  <div>Hey there!</div>

  <div>I like turtles.</div>

  <div>Do you like them?</div>

</div>

<div id="show"></div>