如何獲取和替換多個跨度元素的值（來自標記字符串）並將它們存儲在數組中

Question

所以我得到一串 HTML 標記，如：

const markup = "<p>thank you for contacting us.&nbsp;<span class=“ck-restricted-editing-exception”>Your</span> case was logged as&nbsp;<span class=“ck-restricted-editing-exception”>Case ID</span>&nbsp;and is assigned to&nbsp;<span class=“ck-restricted-editing-exception”>Technician Name</span>. We will attempt to resolve your issue within the next&nbsp;<span class=“ck-restricted-editing-exception”>Time</span>&nbsp;hours.</p>"

我想要做的是選擇所有 <span> s（一個接一個），獲取它們的內部內容，將其存儲在一個對象數組中，並分配一個唯一的 id 或類似於 span 的東西。

像這樣

const spanValues = [
  { spanId: 1, spanContent: 'Your' },
  ...and so on
]

---

我正在考慮通過“<span”和“</span>”分割字符串以獲得一個數組，然后循環遍歷該數組，找到所有以“<span”開頭並且是“</span>”的元素" 並對這些字符串執行操作。

不知道如何從 <span> 中獲取和存儲值

然而，它已經聽起來像是一個凌亂的解決方案。 還有什么人可以建議嗎？

Answer 1

你需要一個 HTML 解析器來解析 HTML，它對於基本的字符串拆分等來說太復雜了。

幸運的是，無論您的環境如何，您幾乎總是可以使用 HTML 解析器。 例如，在瀏覽器中，瀏覽器當然知道如何：

const div = document.createElement("div");
div.innerHTML = markup;

const spanValues = [...div.querySelectorAll("span")].map((span, index) => ({
    spanId: index + 1,
    spanContent: span.textContent
}));

現場示例：

 const markup = "<p>thank you for contacting us.&nbsp;<span class=“ck-restricted-editing-exception”>Your</span> case was logged as&nbsp;<span class=“ck-restricted-editing-exception”>Case ID</span>&nbsp;and is assigned to&nbsp;<span class=“ck-restricted-editing-exception”>Technician Name</span>. We will attempt to resolve your issue within the next&nbsp;<span class=“ck-restricted-editing-exception”>Time</span>&nbsp;hours.</p>"; const div = document.createElement("div"); div.innerHTML = markup; const spanValues = [...div.querySelectorAll("span")].map((span, index) => ({ spanId: index + 1, spanContent: span.textContent })); console.log(spanValues);

這個特定的例子依賴於querySelectorAll中的NodeList是可迭代的，它在現代瀏覽器上。 （有關更多信息以及如何在數組可迭代但NodeList不可迭代的瀏覽器上對其進行 polyfill，請參閱我的答案。）

或者你可以直接在其上使用Array.prototype.map ：

const spanValues = Array.prototype.map.call(div.querySelectorAll("span"), (span, index) => ({
    spanId: index + 1,
    spanContent: span.textContent
}));

Answer 2

前言

請注意，這樣一個簡單的正則表達式在復雜情況下會失敗。 正如下面 TJ 所提到的，您無法使用正則表達式解析 HTML，但是由於請求提到文本來自 CKEditor，我假設您可以限制通過它遇到的案例數量。

再一次，這只是一個意味着無法以其他方式解析 html 的解決方案。 如果您可以以某種方式解析 HTML，請不要依賴此解決方案。

前言到此結束。

這是一個解決方案，假設您的標記實際上是文本（如評論中所述），並且 id 僅假定為遇到匹配的順序。 此外，這假設除了使用正則表達式之外沒有其他解決方案。 簡而言之，這假設您無法使用任何類型的虛擬 DOM、HTML 解析器或類似的東西，因此需要一個正則表達式。

此示例依賴於單個正則表達式： https : //regex101.com/r/Y6KreE/1

並利用 while 循環來構建對象數組。

 const markup = "<p>thank you for contacting us.&nbsp;<span class=“ck-restricted-editing-exception”>Your</span> case was logged as&nbsp;<span class=“ck-restricted-editing-exception”>Case ID</span>&nbsp;and is assigned to&nbsp;<span class=“ck-restricted-editing-exception”>Technician Name</span>. We will attempt to resolve your issue within the next&nbsp;<span class=“ck-restricted-editing-exception”>Time</span>&nbsp;hours.</p>"; const regex = /<span[^>]*>(.+?)<\\/span>/gm; const spanValues = []; let matchGroup, i = 0; while ((i++, matchGroup = regex.exec(markup)) !== null) { spanValues.push({ spanId: i, spanContent: matchGroup[1] }); } console.log(spanValues);