Strip unwanted tag in a string (no JQuery)

Question

I have a string that contains the following:

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

i want to be able to use the JavaScript replace function with regx expression to only remove the spans that do not have an id. So that the result would look like

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

I am really not interested in using jQuery. I would rather use pure JavaScript to solve the problem. I have the following but it does not seem to properly work

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

Any help would be appreciated!

Are you sure it's outside of this scope: [Don't parse (X)HTML with RegEx](http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags#answer-1732454)? — fncomp, Nov 15 '11 at 02:29
There is what you want and there is what works. Which do you **really** want? A robust solution will require parsing the string in ways that a regular expression can't. — RobG, Nov 15 '11 at 02:35
I do not mind using A robust solution. I just thought a regexp is the way to go. — Eyad Fallatah, Nov 15 '11 at 02:59
Somebody already posted a non-jQuery answer to your previous question on the same subject: http://stackoverflow.com/questions/8129509/javascript-to-untag-spans-without-id/8129799#8129799 (In that question you said you didn't mind jQuery, but now suddenly you do?) — nnnnnn, Nov 15 '11 at 03:22

score 3 · Answer 1 · answered Nov 15 '11 at 02:32

3

Use the DOM, not a 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"

Demo: http://jsfiddle.net/mattball/Ctrkf/

_{"It is tempting, if the only tool you have is a hammer, to treat everything as if it were a nail."}

answered Nov 15 '11 at 02:32

Matt Ball

354,903
100
647
710

Obviously this code removes _all_ spans. It should be straightforward to see how to adapt it to leave spans with IDs, though I'm not sure I see how this is useful. – Matt Ball Nov 15 '11 at 02:40
This removes all spans including the ones that I want to keep. Is there any way to modify this to keep only the ones with ID? – Eyad Fallatah Nov 15 '11 at 02:46
Did you not see my comment? Anyway, is there a particular reason you _don't_ want to use a JS library (like jQuery)? It will only make your task easier. – Matt Ball Nov 15 '11 at 02:52
Code that doesn't use jQuery took about 5 minutes to write and test. Maybe you should try not using it sometime. – RobG Nov 15 '11 at 02:58
No particular reason. I would rather stick to pure JavaScript. – Eyad Fallatah Nov 15 '11 at 02:59

RobG · Accepted Answer · 2011-11-15T03:08:49.553

Something like this will do the job, but it doesn't use a regular expression (but it doesn't use jQuery either, so one out of two ain't bad).

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

It's not particularly robust (actually it works better than I thought it would) and will likely fail in cases slightly different to the test case. But it shows the strategy.

Here's another version, pretty similar though:

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

Is there any reason why it fails when the span is inside of another span that has an id? — Eyad Fallatah, Nov 15 '11 at 03:30
Yes, that wasn't a requirement. :-) Note the caveat in the answer. If the OP wants to delve into nested elements, recursion into child nodes isn't too hard to implement. — RobG, Nov 15 '11 at 03:33
No idea how to use recursion though. Could you please elaborate more? — Eyad Fallatah, Nov 15 '11 at 03:45

Strip unwanted tag in a string (no JQuery)

2 Answers2