javascript - 删除没有 ID 的嵌套

Question

好的，我有以下字符串

我有一个包含以下内容的字符串:

<span>A</span>BC<span id="blabla">D<span>EF</span></span>GH

我希望能够使用纯 JavaScript 去除任何没有 id 的 span 标记，以便输出如下所示:

ABC<span id="blabla">DEF</span>GH

我有以下代码可以正常工作，但不能处理中间的嵌套跨度(包含 EF 的跨度)。我只需要知道如何使用递归来实现我的目标。

function removeSpans2(s) {
  var a = document.createElement('div');
  a.innerHTML = s;
  var node, next = a.firstChild;

  while (node = next) {
    next = next.nextSibling

    if (node.tagName && node.tagName.toLowerCase() == 'span' && !node.id) {
      a.replaceChild(document.createTextNode(node.textContent || node.innerText), node);
    }
  }
  return a.innerHTML;
}

Answer 1

不需要递归，想出了一个更简单的算法。这一个处理各种嵌套元素，您可以在跨度内有 A 元素，或者在侧面 As 中有跨度，或者在跨度中跨度......等等。

function removeSpans3(s) {
  var a = document.createElement('div');
  a.innerHTML = s;
  var span, spans = a.getElementsByTagName('span');
  var frag, arr = [];

  // Stabilise spans collection in array
  for (var i=0, iLen=spans.length; i<iLen; i++) {
    arr[i] = spans[i];
  }

  // Process spans
  for (i=0; i<iLen; i++) {
    span = arr[i];

    // If no id, put content into a fragment
    if (!span.id) {

      // Some older IEs may not like createDocumentFragment
      frag = document.createDocumentFragment();

      while (span.firstChild) {
        frag.appendChild(span.firstChild);
      }

      // Replace span with its content in the fragment
      span.parentNode.replaceChild(frag, span);
    }
  }
  return a.innerHTML;
}