将给定的 HTML span 类转换为@data-id [关闭]

Answer 1

这不是微不足道的，我已经假设了一些关于恢复功能的事情

const text1 = `<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>`;

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

const fragment = document.createElement("div");
fragment.innerHTML = text1;
const convertedText = []
const p = fragment.querySelector("p")
const spans = p.querySelectorAll("span");
spans.forEach(span => {
  if (span.matches("[data-id]")) {
    convertedText.push(span.previousSibling.textContent.trim())
    convertedText.push(`${span.dataset.denotationChar}${span.dataset.id}`)
  }  
});
const container1 = document.getElementById("container1");
container1.textContent = convertedText.join(" ");

const text2 = container1.textContent;
const regex = /(\S+)\s+(@[0-9a-f]{8}(?:-[0-9a-f]{4}){3}-[0-9a-f]{12})/g;
const matches = [...text2.matchAll(regex)].flatMap(m => [m[1], m[2]].filter(Boolean));
const container2 = document.getElementById("container2");
console.log(matches)
let cnt = 0;
container2.textContent = `<p>${matches.reduce((acc,cur,i) => {
  if (cur.startsWith("@")) acc.push(`<span class="mention" data-index="0" data-denotation-char="@" data-id="${cur.slice(1)}" data-value="test${++cnt}"><span contenteditable="false"><span class="ql-mention-denotation-char">@</span>test${cnt}</span></span>`)
  return acc;
},[]).join(" ")}</p>`;

<pre id="container1"></pre>
<pre id="container2"></pre>