FInd the data ids after HTML span and add them to a list (string data)

Question

I have a HTML data in string form like this:

const text = "<p>Hi <span class="mention" data-index="0" data-denotation-char="@" data-id="58963f62-3417-481f-9d46-4f5625e9a1ab" data-value="test1 "><span contenteditable="false"><span class="ql-mention-denotation-char">@</span>test1 </span></span> Hi <span class="mention" data-index="0" data-denotation-char="@" data-id="58963f62-3417-481f-9d46-4f5625e9a1cd" data-value="test2 "><span contenteditable="false"><span class="ql-mention-denotation-char">@</span>test2 </span></span> </p>"

I want to extract all the data-id from this data wherever the span class = "mention"

How to do this in javascript?

I was thinking of a regex parser, but is there a easier way to achieve this?

The output will be ["58963f62-3417-481f-9d46-4f5625e9a1ab", "58963f62-3417-481f-9d46-4f5625e9a1cd"]

Answer 1

A simple .querySelectorAll() would do:

const ids = [];

document.querySelectorAll('span.mention').forEach(element => {
  ids.push(element.dataset.id);
});

Try it:

const ids = [];

document.querySelectorAll('span.mention').forEach(e => {
  ids.push(e.dataset.id);
});

console.log(ids);

<p>
    Hi
    <span
        class="mention"
        data-index="0"
        data-denotation-char="@"
        data-id="58963f62-3417-481f-9d46-4f5625e9a1ab"
        data-value="Test1 "
    >
        <span contenteditable="false">
            <span class="ql-mention-denotation-char">@</span>
            Test1
        </span>
    </span>
    Hi
    <span
        class="mention"
        data-index="0"
        data-denotation-char="@"
        data-id="58963f62-3417-481f-9d46-4f5625e9a1cd"
        data-value="Test2 "
    >
        <span contenteditable="false">
            <span class="ql-mention-denotation-char">@</span>
            Test2
        </span>
    </span>
</p>

And, if the HTML is stored in a string, we need to parse it using the built-in parser. First, create an element using document.createElement() and assign your string to its .innerHTML property:

const div = document.createElement('div');
div.innerHTML = html;

Then, we use the .querySelectorAll() method on it, just like what we did with document above:

div.querySelectorAll('span.mention').forEach(element => {
  ids.push(element.dataset.id);
});

Try it:

const html = `<p>
    Hi
    <span
        class="mention"
        data-index="0"
        data-denotation-char="@"
        data-id="58963f62-3417-481f-9d46-4f5625e9a1ab"
        data-value="Test1 "
    >
        <span contenteditable="false">
            <span class="ql-mention-denotation-char">@</span>
            Test1
        </span>
    </span>
    Hi
    <span
        class="mention"
        data-index="0"
        data-denotation-char="@"
        data-id="58963f62-3417-481f-9d46-4f5625e9a1cd"
        data-value="Test2 "
    >
        <span contenteditable="false">
            <span class="ql-mention-denotation-char">@</span>
            Test2
        </span>
    </span>
</p>`;

const div = document.createElement('div');
div.innerHTML = html;

const ids = [];
div.querySelectorAll('span.mention').forEach(e => {
  ids.push(e.dataset.id);
});

console.log(ids);