去掉字符串中不需要的标签(不需要JQuery)

Question

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

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

我希望能够使用JavaScript替换函数与regx表达式，只删除跨度没有一个id。这样结果看起来就像

ABC<span id="blabla">D</span>EF

我真的对使用jQuery不感兴趣。我宁愿使用纯JavaScript来解决这个问题。我有以下内容，但它似乎不能正常工作

myText.replace(/(<([^>]+)>)/ig,"");

任何帮助将不胜感激!

Answer 1

使用DOM，而不是regexp。

var input = '<span>A</span>BC<span id="blabla">D</span>EF',
    output,
    tempElt = document.createElement('span');
tempElt.innerHTML = input;
// http://www.quirksmode.org/dom/w3c_html.html#t03
if (tempElt.innerText) output = tempElt.innerText;
else output = tempElt.textContent;
console.log(output); // "ABCDEF"

演示:http://jsfiddle.net/mattball/Ctrkf/

---

_{"如果你唯一拥有的工具是锤子，那么你很容易把一切都当作钉子来对待。"}

Answer 2

这样就可以了，但是它不使用正则表达式(但是它也不使用jQuery，所以两个中的一个还不错)。

var s = '<span>A</span>BC<span id="blabla">D</span>EF';
function removeSpans(s) {
  var a = document.createElement('div');
  var b = a.cloneNode(true);
  a.innerHTML = s;
  var node;
  while (a.firstChild) {
    node = a.removeChild(a.firstChild);
    if (node.tagName && 
        node.tagName.toLowerCase() == 'span' &&
        node.id == '') {
        b.appendChild(document.createTextNode(getText(node)));
    } else {
      b.appendChild(node);
    }
  }
  return b.innerHTML;
}
alert(removeSpans(s));

它不是特别健壮(实际上它比我想象的要好)，并且在与测试用例略有不同的情况下可能会失败。但它显示了策略。

这是另一个版本，非常相似:

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