Read data-id attribute from html string using javascript

Question

I am using Quill editor with user mentioning feature. After the integration, editor generating the below result for the given text (Actual text).

Actual Text - this is from @Siddharth Choubey to @dev 3 Developer 3

Below is the generated code by editor for the actual text.

<p>this is from 
    <span class="mention" data-index="0" data-denotation-char="@" data-id="114" data-value="Siddharth Choubey">
        <span contenteditable="false">
            <span class="ql-mention-denotation-char">@</span>
            Siddharth Choubey
        </span>
    </span>
     to 
     <span class="mention" data-index="2" data-denotation-char="@" data-id="132" data-value="dev 3 Developer 3">
        <span contenteditable="false">
            <span class="ql-mention-denotation-char">@</span>
            dev 3 Developer 3
        </span>
    </span> 
</p>

Now i am trying to read the each data-id attribute form the generated code separately & storing them in array using javascript . I have tried the solution mentioned here But it is not working in my case.

I am unable to parse this generated code. Any one please help me on how can i read all data-id using javascript.

My code

 sendComment(){
        console.log(this.comment);
        const commentText=document.querySelectorAll('span.mention');
        commentText.forEach(btn => console.log(btn.getAttribute('data-id')))
    }

Answer 1

I found the issue in my code.

sendComment(){
    let userIDList=[];
    console.log(this.comment);
    const commentText=document.querySelectorAll('span.mention');
    commentText.forEach(function(btn,index)
    {
        userIDList[index] = btn.getAttribute('data-id');
    });

    console.log(userIDList);
}