How to get and replace values of multiple span elements (from a string of markup) and store them in an array

Question

So I am getting a string of HTML Markup like:

const markup = "<p>thank you for contacting us.&nbsp;<span class=“ck-restricted-editing-exception”>Your</span> case was logged as&nbsp;<span class=“ck-restricted-editing-exception”>Case ID</span>&nbsp;and is assigned to&nbsp;<span class=“ck-restricted-editing-exception”>Technician Name</span>. We will attempt to resolve your issue within the next&nbsp;<span class=“ck-restricted-editing-exception”>Time</span>&nbsp;hours.</p>"

What I want to do is select all the <span>s (one by one), get their inner content, store it in an array of objects and assign an unique id or something similar to the span.

Like so

const spanValues = [
  { spanId: 1, spanContent: 'Your' },
  ...and so on
]

---

I am thinking of splitting the string by "<span" and "</span>" in order to get an array and then looping over that array, finding all the elements that start with "<span" and are "</span>" and perform operations on those strings.

Can't figure out how can I get and store the values from the <span>s though

However it already is sounding like a messy solution. Anything else anyone can suggest?

Answer 1

You need an HTML parser to parse HTML, it's too complicated for basic string splitting and such.

Fortunately, no matter what your environment, you almost always have an HTML parser availble to you. For instance, in browsers, of course the browser knows how:

const div = document.createElement("div");
div.innerHTML = markup;

const spanValues = [...div.querySelectorAll("span")].map((span, index) => ({
    spanId: index + 1,
    spanContent: span.textContent
}));

Live Example:

const markup = "<p>thank you for contacting us.&nbsp;<span class=“ck-restricted-editing-exception”>Your</span> case was logged as&nbsp;<span class=“ck-restricted-editing-exception”>Case ID</span>&nbsp;and is assigned to&nbsp;<span class=“ck-restricted-editing-exception”>Technician Name</span>. We will attempt to resolve your issue within the next&nbsp;<span class=“ck-restricted-editing-exception”>Time</span>&nbsp;hours.</p>";

const div = document.createElement("div");
div.innerHTML = markup;

const spanValues = [...div.querySelectorAll("span")].map((span, index) => ({
    spanId: index + 1,
    spanContent: span.textContent
}));

console.log(spanValues);

That specific example relies on the NodeList from querySelectorAll being iterable, which it is on modern browsers. (See my answer here for more and how to polyfill it on browsers where arrays are iterable but NodeList isn't.)

Or you can use Array.prototype.map on it directly:

const spanValues = Array.prototype.map.call(div.querySelectorAll("span"), (span, index) => ({
    spanId: index + 1,
    spanContent: span.textContent
}));

Answer 2

PREFACE

BEWARE that such a simple regex would fail on COMPLEX cases. As mentioned by T.J. below, you just can't parse HTML with a regex, but since the request mentioned that the text is coming from CKEditor, I would assume you could restrict the amount of cases you would encounter through it.

Once again, it's just a solution that implies being unable to parse the html in other ways. If you can somehow parse the HTML, do not rely on this solution.

PREFACE ENDS HERE.

Here is a solution assuming your markup is actually textual (as mentioned in the comments) and the ids are just assumed to be the order the match was encountered. Also, this assumes there is no other solutions other than using a regex. In a nutshell, this assumes you just can't work with any kind of virtual DOM, HTML parser or something similar, hence a regex is needed.

This example relies on a single regex: https://regex101.com/r/Y6KreE/1

And takes advantage of a while loop to build up the array of objects.

const markup = "<p>thank you for contacting us.&nbsp;<span class=“ck-restricted-editing-exception”>Your</span> case was logged as&nbsp;<span class=“ck-restricted-editing-exception”>Case ID</span>&nbsp;and is assigned to&nbsp;<span class=“ck-restricted-editing-exception”>Technician Name</span>. We will attempt to resolve your issue within the next&nbsp;<span class=“ck-restricted-editing-exception”>Time</span>&nbsp;hours.</p>";

const regex = /<span[^>]*>(.+?)<\/span>/gm;
const spanValues = [];
let matchGroup, i = 0;
while ((i++, matchGroup = regex.exec(markup)) !== null) {
  spanValues.push({
    spanId: i,
    spanContent: matchGroup[1]
  });
}

console.log(spanValues);