如何获取和替换多个跨度元素的值（来自标记字符串）并将它们存储在数组中

Question

所以我得到了一串 HTML 标记，例如：

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

我想要做的是选择所有 （一个接一个），获取它们的内部内容，将其存储在对象数组中并分配一个唯一的 id 或类似于 span 的东西。

像这样

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

---

我正在考虑通过“”拆分字符串以获得一个数组，然后遍历该数组，找到所有以“" 并对这些字符串执行操作。

不知道如何从 中获取和存储值

但是，这听起来已经像是一个混乱的解决方案。还有什么其他人可以建议的吗？

Answer 1

前言

注意这样一个简单的正则表达式在复杂的情况下会失败。正如 T.J. 所说。在下面，您无法使用正则表达式解析 HTML，但由于请求提到文本来自 CKEditor，我假设您可以限制通过它遇到的案例数量。

再一次，这只是一个暗示无法以其他方式解析 html 的解决方案。如果您能以某种方式解析 HTML，不要依赖此解决方案。

前言到此结束。

这是一个解决方案，假设您的标记实际上是文本的（如 cmets 中所述），并且仅假定 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);

Answer 2

你需要一个 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 是可迭代的，它在现代浏览器上。 （请参阅 my answer here 了解更多信息以及如何在数组可迭代但 NodeList 不可迭代的浏览器上填充它。）

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

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