Есть ли способ создать массив отдельных слов из innerText через JavaScript?

Question

У меня есть строка, которая выглядит примерно так:

<strong>word</strong>: or <em>word</em> or <p><strong>word</strong>: this is a sentence</p> etc...

Я пытаюсь разобрать каждую строку в массив без элемента html.
Например строка:

<strong>word</strong>

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

['word', ':']

Строка:

<p><strong>word</strong>: this is a sentence</p>

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

['word', ':', 'this', 'is', 'a', 'sentence']      

Есть ли способ сделать это через Javascript? Мой код ниже создает массив отдельных символов, а не слов, разделенных пробелами.

//w = the string I want to parse
var p = document.querySelector("p").innerText;

var result = p.split(' ').map(function(w) {
  if (w === '')
    return w;
  else {
    var tempDivElement = document.createElement("div");
    tempDivElement.innerHTML = w;

    const wordArr = Array.from(tempDivElement.textContent);
    return wordArr;
  }
});
console.log(result)

<p><strong>word</strong>: this is a sentence</p>

Answer 1

Сначала я сделаю временный div и извлеку внутренний текст.Затем используйте match() для поиска слов (примечание \w соответствует буквам, цифрам и подчеркиванию).Это будет рассматривать пунктуацию как : как отдельные слова, что, кажется, то, что вы хотите.

p = '<strong>word</strong>: or <em>word</em> or <p><strong>word</strong>: this is a sentence</p>'

var tempDivElement = document.createElement("div");
tempDivElement.innerHTML = p;

let t = tempDivElement.innerText
let words = t.match(/\w+|\S/g)
console.log(words)

Если вам нужны только слова, сопоставляйте только по \w:

p = '<strong>word</strong>: or <em>word</em> or <p><strong>word</strong>: this is a sentence</p>'

var tempDivElement = document.createElement("div");
tempDivElement.innerHTML = p;

let t = tempDivElement.innerText
let words = t.match(/\w+/g)
console.log(words)

Answer 2

1. Для корректной работы этого фрагмента <div> обернут вокруг целевого HTML.
2. Извлеките текст с помощью .textContent
3. Очистите его с помощью .replace(), передав регулярное выражение /(\s+|\n)/g, которое заменит любое количество соседних пробелов ИЛИ символов новой строки одним пробелом.Строка .trim() на обоих концах.
4. Тогда .split() строка в каждом пробеле.

let text = document.querySelector('.content').textContent;
let clean = text.replace(/(\s+|\n)/g, ' ').trim();
let array = clean.split(' ');
console.log(array);

<div class='content'>
  <strong>word</strong>: or <em>word</em> or
  <p><strong>word</strong>: this is a sentence</p> etc...
</div>

Answer 3

Двоеточие после значения «word» - сложная часть, но, используя атрибут textContent и некоторые манипуляции со строками, вы можете установить строку, которая может быть split() в массив, который вы ищете.

Сначала соберите анализируемый элемент:

var p = document.querySelector("p");

Затем получите текстовое содержимое из него, используя атрибут textContent:

var pContent = p.textContent;

Далее, «массируйте» содержимое, чтобы убедиться, что любые «несловесные» символы отделены от слов без потери (пробел на любом конце обрабатывает несловесные символы перед и после слов):

var result = pContent.replace(/(\W+)/g, " $0 ");

Затем обрежьте все начальные или конечные пробелы, чтобы избежать пустых элементов в начале и конце массива:

var result = result.trim();

Затем, наконец, разделите обновленную строку на блоки пробелов:

var result = result.split(/\s+/);

---

Что делает это еще лучше, так это то, что вы можете фактически выполнять все эти манипуляции в одной строке кода, если хотите, как показано в сокращенном решении ниже:

var element1 = document.querySelector("#element1");
var element2 = document.querySelector("#element2");
var element3 = document.querySelector("#element3");

function elementTextToArray(element) {
  return element.textContent.replace(/(\W+)/g, " $0 ").trim().split(/\s+/);
}

console.log(elementTextToArray(element1));
console.log(elementTextToArray(element2));
console.log(elementTextToArray(element3));

<p id="element1"><strong>word</strong></p>
<p id="element2"><strong>word</strong>: this is a sentence</p>
<p id="element3"><strong>word</strong>: this is a sentence <em>with multiple levels of <strong>depth</strong> in it!!!</em></p>

---

ОБНОВЛЕНИЕ # 1 Сделано "не-слово" проверить оба жадные (захватывает все не-символы) и способен захватывать группы несловесных символов (например, «!!!»).

Answer 4

На основании этого ответа: https://stackoverflow.com/a/2579869/1921385 вы можете рекурсивно перебирать каждый узел и добавлять текстовые части в массив.EG:

var items = [];
var elem = document.querySelector("div");
function getText(node) {
    // recurse into each child node
    if (node.hasChildNodes()) {
        node.childNodes.forEach(getText);
    } else if (node.nodeType === Node.TEXT_NODE) {
        const text = node.textContent.trim();
        if (text) {
            var words = text.split(" ");
            words.forEach(function(word) {
              items.push(word);
            });
        }
    }
}
//
getText(elem);
console.log(items);

<div><strong>word</strong>: or <em>word</em> or <p><strong>word</strong>: this is a sentence</p></div>

Answer 5

Один из возможных способов - использовать метод построения DOMParser:

var string = '<strong>word</strong>: or <em>word</em> or <p><strong>word</strong>: this is a sentence</p> etc...';
var doc = new DOMParser().parseFromString(string, 'text/html');

Затем вам нужно будет рекурсивно спускаться в объект doc HTMLDocument через childNode s.

Точно так же вы можете использовать клиентский javascript web scraper, такой как artoo.js , и таким образом исследовать узлы.

Что касается строк, которые НЕ находятся в реальном теге, таких как ":" или ", вам нужно будет сначала обернуть строку в тег <p> или что-то в этом роде.

Answer 6

вы можете сделать это, создав временный HTML-элемент, а затем просто получите его textContent.

пример:

/*to get words only seprated by space*/
function myFunction1(htmlString) {
  var div = document.createElement('div');
  div.innerHTML = htmlString;
  return (div.textContent || div.innerText).toString().split(" ");
};

/* to get words seprated by space as well as HTML tags */
function myFunction2(htmlString) {
  var div = document.createElement('div');
  div.innerHTML = htmlString;
  var children = div.querySelectorAll('*');
  for (var i = 0; i < children.length; i++) {
    if (children[i].textContent)
      children[i].textContent += ' ';
    else
      children[i].innerText += ' ';
  }
  return (div.textContent || div.innerText).toString().split(" ");
};

console.log('function 1 result:');
console.log(myFunction1("<strong>word</strong>: or <em>word</em> or <p><strong>word</strong>: this is a sentence</p>etc..."));
console.log('function 2 result: ');
console.log(myFunction2("<strong>word</strong>: or <em>word</em> or <p><strong>word</strong>: this is a sentence</p>etc..."));