How can I generate a list of separate words from innerText using JavaScript?

Question

How can I generate a list of separate words from innerText using JavaScript?

Wondering how to parse a string correctly using JavaScript? Take a look at the example below:

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

The objective is to convert each string into an array without the HTML elements present.
For instance:

<strong>word</strong>

This specific string should be converted to an array like this:

['word', ':']

Similarly, for the string:

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

The expected array output would be:

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

If you are currently facing issues in achieving this outcome with your JavaScript code and it's generating individual characters instead of words, then have a look at the snippet provided below:

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

javascript arrays innertext

Answer 1

Answer №1

To begin, I would create a temporary div and then extract the inner text from it. Utilizing match(), I can identify words by using \w to match letters, numbers, and underscores. This approach separates punctuation like : into distinct words, aligning with your desired outcome.

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)

If the goal is to solely extract words, then narrowing down the match to \w would be more suitable:

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

To begin, I would create a temporary div and then extract the inner text from it. Utilizing match(), I can identify words by using \w to match letters, numbers, and underscores. This approach separates punctuation like : into distinct words, aligning with your desired outcome.

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)

If the goal is to solely extract words, then narrowing down the match to \w would be more suitable:

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 3

Answer №2

To tackle this issue, consider utilizing the built-in DOMParser method:

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

Next, make sure to recursively navigate through the documentObject in order to access its HTMLDocument child nodes.

Alternatively, you could employ a client-side JavaScript web scraping tool like artoo.js to analyze the nodes effectively.

In cases where strings are not enclosed within an actual tag, such as ": or," it might be necessary to enclose the string within a <p> tag before proceeding.

Answer 4

To tackle this issue, consider utilizing the built-in DOMParser method:

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

Next, make sure to recursively navigate through the documentObject in order to access its HTMLDocument child nodes.

Alternatively, you could employ a client-side JavaScript web scraping tool like artoo.js to analyze the nodes effectively.

In cases where strings are not enclosed within an actual tag, such as ": or," it might be necessary to enclose the string within a <p> tag before proceeding.

Answer 5

Answer №3

Referencing this helpful answer from , you have the ability to perform a recursive iteration through each node and store the text components in an array. For example:

var items = [];
var elem = document.querySelector("div");
function getText(node) {
    // dive into every 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 6

Referencing this helpful answer from , you have the ability to perform a recursive iteration through each node and store the text components in an array. For example:

var items = [];
var elem = document.querySelector("div");
function getText(node) {
    // dive into every 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 7

Answer №4

To achieve this, you can create a temporary HTML element and then extract its textContent.

Here is an example:

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

/* Extracting words with HTML tags and spaces */
function getWordsWithTagsAndSpaces(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('Result of function 1:');
console.log(getWordsSeparatedBySpace("<strong>word</strong>: or <em>word</em> or <p><strong>word</strong>: this is a sentence</p>etc..."));
console.log('Result of function 2: ');
console.log(getWordsWithTagsAndSpaces("<strong>word</strong>: or <em>word</em> or <p><strong>word</strong>: this is a sentence</p>etc..."));

Answer 8

To achieve this, you can create a temporary HTML element and then extract its textContent.

Here is an example:

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

/* Extracting words with HTML tags and spaces */
function getWordsWithTagsAndSpaces(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('Result of function 1:');
console.log(getWordsSeparatedBySpace("<strong>word</strong>: or <em>word</em> or <p><strong>word</strong>: this is a sentence</p>etc..."));
console.log('Result of function 2: ');
console.log(getWordsWithTagsAndSpaces("<strong>word</strong>: or <em>word</em> or <p><strong>word</strong>: this is a sentence</p>etc..."));

Answer 9

Answer №5

In order to ensure proper functionality within this Snippet, a <div> is encompassing the target HTML.
Retrieve the text using .textContent
Sanitize the text by utilizing .replace() with the regex /(\s+|\n)/g, which will substitute any consecutive spaces OR newline characters with a single space. The trimmed string covers both ends.
Proceed to split the string at each space using .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 10

In order to ensure proper functionality within this Snippet, a <div> is encompassing the target HTML.
Retrieve the text using .textContent
Sanitize the text by utilizing .replace() with the regex /(\s+|\n)/g, which will substitute any consecutive spaces OR newline characters with a single space. The trimmed string covers both ends.
Proceed to split the string at each space using .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 11

Answer №6

Figuring out how to handle the colon following the "word" value may seem complex, but by utilizing the textContent attribute and implementing some string manipulation techniques, you can construct a string that is suitable for the desired array split operation.

To begin, locate the element that needs to be parsed:

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

Subsequently, extract the text content from within it using the "textContent" attribute:

var pContent = p.textContent;

Then, refine the content to ensure proper separation of any "non-word" characters from the words while preserving them (the spaces at both ends manage non-word characters before and after the words):

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

Afterwards, eliminate any leading or trailing spaces to prevent empty elements at the start and end of the array:

var result = result.trim();

Finally, split the modified string based on white space blocks:

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

Furthermore, you have the option to condense all of this manipulation into a single line of code, as demonstrated in the compact solution below:

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>

UPDATE #1 Enhanced the "non-word" evaluation to be comprehensive (captures all non-word characters) and capable of capturing groups of non-word characters (such as "!!!").

Answer 12

Figuring out how to handle the colon following the "word" value may seem complex, but by utilizing the textContent attribute and implementing some string manipulation techniques, you can construct a string that is suitable for the desired array split operation.

To begin, locate the element that needs to be parsed:

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

Subsequently, extract the text content from within it using the "textContent" attribute:

var pContent = p.textContent;

Then, refine the content to ensure proper separation of any "non-word" characters from the words while preserving them (the spaces at both ends manage non-word characters before and after the words):

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

Afterwards, eliminate any leading or trailing spaces to prevent empty elements at the start and end of the array:

var result = result.trim();

Finally, split the modified string based on white space blocks:

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

Furthermore, you have the option to condense all of this manipulation into a single line of code, as demonstrated in the compact solution below:

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>

UPDATE #1 Enhanced the "non-word" evaluation to be comprehensive (captures all non-word characters) and capable of capturing groups of non-word characters (such as "!!!").

How can I generate a list of separate words from innerText using JavaScript?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

What can possibly be the reason why the HttpClient in Angular 5 is not functioning properly

Having issues with $_POST not retrieving values from .post

Warning occurs when trying to access frame with URL in JavaScript; issue arises in poltergeist but not selenium-webdriver

Manually controlling line breaks in HTML text

Tips for successfully parsing JSON data during an Ajax call

Ajax transmits an array of data to the server

From HTML to Python to Serial with WebIOPi

TypeScript does not have access to the array prototype

A guide on iterating through an array in vue.js and appending a new attribute to each object

Using Ajax/jQuery in combination with Mongodb

Adding Proxy-Authorization Header to an ajax request

Retrieving external JSON data with JavaScript

Emphasizing the text while making edits to an item within the dhtmlx tree

HTML script tag without a specified type

Is it necessary to include a request in the API route handler in Next.js when passing parameters?

Is the top bar feature malfunctioning in version 4.3.2 of Foundation?

Creating dynamic <a> tags using JavaScript

What's the best way to implement asynchronous state updating in React and Redux?

Currently in the process of executing 'yarn build' to complete the integration of the salesforce plugin, encountering a few error messages along the way

What is the process for transforming an asynchronous method into a synchronous version?