javascript - 删除没有ID的嵌套<SPAN>

好的，我有下面的字符串
我有一个包含以下内容的字符串：

<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;
}

最佳答案

不需要递归，找到一个更简单的算法。这一个处理所有类型的嵌套元素，您可以在跨距内有一个元素，或在边上有一个跨距，或在跨距内有一个跨距无论什么。

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;
}