Разделение слов и словосочетаний в параграфе

Задача у меня следующая: разбить слова и словосочетания в предложении. У меня возникла сложность со словосочетаниями. Чтобы как то отделить слова от словосочетаний, я вынес словосочетания в отдельный span.

Привожу пример, что имею на данный момент.

let text = "<p>Привет, как <span>твои дела</span>? Это тестовое сообщение.</p>";
let myArray = text.split("<p>").join("").split("</p>");
myArray.pop(myArray.length - 1); // Тут получаю массив из параграфов (если их будет несколько)
myArray.map((item, index) => {
  let arr = item.split(/\s+/); // Тут массив слов, который получил разбиением через пробелы (именно тут надо как то учитывать словосочетания из span)
  console.log(arr)
})

В итоге надо получить на выходе следующее

['Привет,', 'как', 'твои дела?', 'Это', 'тестовое', 'сообщение.']

А у меня вот так

["Привет,", "как", "<span>твои", "дела</span>?", "Это", "тестовое", "сообщение."]

Ответы (3 шт):

Автор решения: vsemozhebuty

Может быть, так? Только пришлось переместить знак вопроса внутрь тега.

let text = "<p>Привет, как <span>твои дела?</span> Это тестовое сообщение.</p>";

let myArray = text.split("<p>").join("").split("</p>");

myArray.pop(myArray.length - 1);

myArray.map((item) => {
  let arr = item
    .split(/(?=<span>)|(?<=<\/span>)/)
    .flatMap(str => str.startsWith('<span>') ?
      str.replace(/^<span>|<\/span>$/g, '') :
      str.trim().split(/\s+/)
    );
  console.log(arr)
});

→ Ссылка
Автор решения: Qwertiy

var text = "<p>Привет, как <span>твои дела</span>? Это тестовое сообщение.</p>";

var res = []

text.replace(
  /<\/?p>|<span>([^<]*)<\/span>([^\s<]*)|([^\s<]+)/g,
  (match, span = "", tail = "", word = "") => {
    var cur = span + tail + word
    cur && res.push(cur)
  }
)

console.log(res)

→ Ссылка
Автор решения: Qwertiy

С учётом знака вопроса после спана:

var text = "<p>Привет, как <span>твои дела</span>? Это тестовое сообщение.</p>";

var res = text
  .split(/\s+|<\/?p>|<span>([^<]*<\/span>[^\s<]*)/)
  .filter(Boolean)
  .map(x => x.replace("</span>", ""))

console.log(res)

Если знак вопроса можно поместить отдельно, то проще:

var text = "<p>Привет, как <span>твои дела</span>? Это тестовое сообщение.</p>";

var res = text
  .split(/\s+|<\/?p>|<span>([^<]*)<\/span>/)
  .filter(Boolean)

console.log(res)

→ Ссылка