.text () объединяет строки без пробелов при удалении HTML-тегов

Question

У меня на сайте есть редактор форматированного текста, и я пытаюсь создать для него надежный счетчик слов.

Поскольку это редактор форматированного текста, он (потенциально) содержит html.

Этот HTML-код может быть, например:

<div class="textEditor">
  <h1><strong>this is a sample heading</strong></h1>
  <p><br></p>
  <p>and this is a sample paragraph</p>
</div>

Чтобы получить надежный счетчик слов, я пытаюсь сначала преобразовать HTML-код в текст, используя:

var value = $('.textEditor').text()

Проблема, с которой я сталкиваюсь, заключается ввозвращаемая строка, кажется, объединяется в том месте, где она удаляет html-теги, и у меня остается следующее:

this is a sample headingand this is a sample paragraph

, как вы можете видеть, слова «заголовок» и «объединены, чтобы стать« заголовком и«который дал бы мне количество слов 10 вместо 11.

любые мысли о том, как правильно добиться этого, будут высоко цениться:)

Answer 1

Я немного поиграл с этим и придумал следующее:

let value = $('.textEditor').text();
function read(){
    alert(value.trim().split(/\s+/).length);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textEditor">
    <h1><strong>this is a sample heading</strong></h1>
    <p><br></p>
    <p>and this is a sample paragraph</p>
</div>
<button onclick="read()">Read</button>

https://codepen.io/anon/pen/YOazqG?editors=1010

Просто обрежьте его и разделите, и все будет в порядке.

Answer 2

Вы можете использовать innerText:

var value = document.querySelector('.textEditor').innerText

или

var value = $('.textEditor')[0].innerText

console.log(document.body.innerText)

<div class="textEditor">
  <h1><strong>this is a sample heading</strong></h1>
  <p><br></p>
  <p>and this is a sample paragraph</p>
</div>