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

抽出一些递归的最佳时机：

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(removeSpans2(node.textContent || node.innerText)), node);
    } else if (node.innerText != undefined){
        var node2 = node.cloneNode(true);
        node2.innerText = removeSpans2(node2.innerText);
        a.replaceChild(node2, node);
    }
  }
  return a.innerHTML;
}

Answer 2

我认为这样可行，只需添加一个递归

function removeSpans2(s , el) {
    var a = el || document.createElement('div');
    a.innerHTML = s;

    var node, next = a.firstChild;

    while (node = next) {
        next = next.nextSibling;
        if( node.children && node.children.length ) {
            arguments.callee(node.innerHTML , node);
        }else if (node.tagName && node.tagName.toLowerCase() == 'span' && !node.id) {
            a.replaceChild(document.createTextNode(node.textContent || node.innerText), node);
        }
    }
    return a.innerHTML;
}

Answer 3

为什么不简单地使用String.replace（），如果它是你似乎指示的html字符串。

str.replace(/<span>([A-Za-z0-9]*)<\/span>/g, '$1');

您可以调整括号之间的值，以适应您在跨度之间找到的内容

编辑上面的代码

编辑只删除标签而不删除

内的内容

Answer 4

不需要递归，找出了一个更简单的算法。这个处理各种嵌套元素，你可以在跨度内有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;
}

删除不带ID的嵌套<span> </span>

4 个答案: