将quill_mention HTML span响应更改为简洁的@data-ids格式

Question

我有一个像这样的字符串形式的HTML数据:

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

我想将span类转换为@data-id。跨度输出由quill-mentions库

给出。示例输出:

convertedtext = "<p>Hi @58963f62-3417-481f-9d46-4f5625e9a1ab Hi @58963f62-3417-481f-9d46-4f5625e9a1cd </p>"

我还想将convertText转换回原始文本。

总而言之，我想为我的后端更改quill_mention HTML响应到@data-ids，然后在我重新呈现 值时将其恢复。相关问题:将给定的HTML span类转换为@data-id

记住，我想用"mention"来替换所有的span。类。因此，这是一个字符串替换问题，其中一个模式必须更改为字符串中的另一个模式。

Answer 1

经过多次尝试，我终于找到了解决方案:

从字符串1到字符串2:

let transformedHTML = document.createElement("div");
transformedHTML.innerHTML = text;
const mentions = transformedHTML.querySelectorAll("span.mention");
// Extract the profileIds from each mention
mentions.forEach(mention => {
mention.outerHTML = `@${mention.dataset.id}`;
})
const newContent = transformedHTML.innerHTML;
console.log("New content is::" + newContent)

字符串2到字符串1:

let text2 = `<p>Hi @58963f62-3417-481f-9d46-4f5625e9a1ab Hi @58963f62-3417-481f-9d46-4f5625e9a1cd </p>`;
const mentionRegex = /(@)([a-z0-9-]+)/g;
let original = text2.replace(mentionRegex, (match, p1, p2) => {
return `<span class="mention" data-index="0" data-denotation-char="${p1}" data-id="${p2}" data-value="${p2} ">
<span contenteditable="false"><span class="ql-mention-denotation-char">${p1}</span>${p2} </span></span> `;
})
console.log("Original content is::" + original)