使用 javascript 从 html 字符串中读取 data-id 属性

Question

我正在使用带有用户提及功能的 Quill 编辑器。 集成后，编辑器为给定文本（实际文本）生成以下结果。

实际文本 - this is from @Siddharth Choubey to @dev 3 Developer 3

下面是编辑器为实际文本生成的代码。

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

现在我正在尝试从生成的代码中分别读取每个data-id属性并使用 javascript 将它们存储在数组中。 我已经尝试过这里提到的解决方案，但它不适用于我的情况。

我无法解析这个生成的代码。 任何人请帮助我如何使用javascript读取所有数据ID。

我的代码

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

Answer 1

我在我的代码中发现了这个问题。

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);
}