Как мне получить строку, являющуюся текстом () элемента, но с пробелами, добавленными после 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>

jQuery:

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 (AKA, они добавляют фактические пробелы после элементов на странице), а затем они просто захватывают строку text (). Я не хочу менять DOM.

Кроме того, я не могу использовать. html () вместо этого и попытаться удалить все, потому что будет wayyyyyy слишком много типы элементов, о которых нужно беспокоиться.

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 для возврата списка всех DIV в вашем элементе myTextArea. Затем вы можете просмотреть каждый элемент в списке, получить его 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>