0

I have a very basic problem with a regular expression in Javascript, I'm stuggling to get it working.

It want to remove 

<text id="toto2" class="classTest">useless</text>

in the following String:

<svg><text id="toto"></text><text id="toto2" class="classTest">useless</text></svg>

So, here is my code:

var svgStr = '<svg><text id="toto"></text><text id="toto2" class="classTest">useless</text></svg>';
svgStr = svgStr.replace(/<text(.)*?class="classTest"(.)*?>(.)*?<\/text>/gm, '');
alert(svgStr);

It only prints: 

    '<svg></svg>'

(it is removing all the < text > nodes). I really do not understand what I'm doing wrong here, any help appreciated!

Thanks!

toni07
  • 356
  • 7
  • 20
  • 6
    Why are you using RegEx to match DOM elements? – tenub Feb 03 '14 at 17:59
  • possible duplicate of [Can you provide some examples of why it is hard to parse XML and HTML with a regex?](http://stackoverflow.com/questions/701166/can-you-provide-some-examples-of-why-it-is-hard-to-parse-xml-and-html-with-a-reg) – tkone Feb 03 '14 at 18:01
  • I know it could sound a bit silly, but in my case it is much simplier, as I receive data as Strings, not as DOM elements (I know I could create DOM elements from the Strings, but I prefer not to do it). – toni07 Feb 03 '14 at 18:01
  • `var el = document.getElementById('toto2'); el.parentNode.removeChild(el);` – tenub Feb 03 '14 at 18:05
  • @tkone, sorry but I don't think so, and thanks for the '-1' thing. – toni07 Feb 03 '14 at 18:10
  • @Vaat666 I didn't downvote -- voting to close DOES NOT cause a downvote to register. Entirely different things. – tkone Feb 03 '14 at 19:43

1 Answers1

4

Here is what your regex is doing:

  • Okay, look for <text... found it (in <text id="toto">).
  • Now match everything up to the first time I find class="classTest", okay good, found that (in <text id="toto2" class="classTest">)
  • Next find everything up to the next >, well that's literally right there (after class="classTest")
  • Finally, find everything up to the next </text>, found it right before </svg>.
  • Remove all of the match.

So it's starting the match at the first <text, ie. the first node, and ending it at the first </text> after class="classTest", which is the last node. In other words, removing it all.

Try this:

/<text[^>]+?class="classTest"[^>]*>.*?<\/text>/g
Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • Works perfectly, and you explained me clearly what my actual regexp tried to do. A big thank you! – toni07 Feb 03 '14 at 18:08
  • This is a good answer. As a string, it could match ` ... `. Unlikely though. `\s` or `(?=\s)` might fix that. –  Feb 03 '14 at 18:17