title: Pattern match a SVG string using Javascript regex
body: <p>I have the SVG string as below: </p>
  
  <pre><code>var svgstring =     '&lt;g font-size="1.6" font-family="DejaVu Sans" stroke="none" fill="#000000"&gt;&lt;rect x="254.01" y="50.00" width="29" height="2.24" stroke="#053581" stroke-width="0.1" fill="#b2b8c3"&gt;&lt;/rect&gt;&lt;text x="254.21" y="51.6" font-size="1.6" font-weight="700" font-family="DejaVu Sans" stroke="none" fill="#000000"&gt;Cav.&lt;/text&gt;&lt;text x="259.21" y="51.6" font-size="1.6" font-weight="700" font-family="DejaVu Sans" stroke="none" fill="#000000"&gt;Wire&lt;/text&gt;&lt;text x="267.21" y="51.6" font-size="1.6" font-weight="700" font-family="DejaVu Sans" stroke="none" fill="#000000"&gt;Colour&lt;/text&gt;&lt;text x="274.21" y="51.6" font-size="1.6" font-weight="700" font-family="DejaVu Sans" stroke="none" fill="#000000"&gt;Gauge&lt;/text&gt;&lt;rect x="254.01" y="52.24" width="29" height="2.24" stroke="#053581" stroke-width="0.1" fill="#ffffff"&gt;&lt;/rect&gt;&lt;text x="254.21" y="53.84" fill="#000000"&gt; 1&lt;/text&gt;&lt;text x="259.21" y="53.84" fill="#000000"&gt; FPTO-20..&lt;/text&gt;&lt;rect x="267.01" y="52.34" width="7" height="2.04" stroke-width="0.01" fill="#C1D5D9"&gt;&lt;/rect&gt;&lt;text x="267.21" y="53.84" fill="#000000"&gt;GY&lt;/text&gt;&lt;text x="274.21" y="53.84" fill="#000000"&gt; 0.75&lt;/text&gt;&lt;rect x="254.01" y="54.48" width="29" height="2.24" stroke="#053581" stroke-width="0.1" fill="#fff8c6"&gt;&lt;/rect&gt;&lt;text x="254.21" y="56.08" fill="#000000"&gt;2&lt;/text&gt;&lt;text x="259.21" y="56.08" fill="#000000"&gt;FPTO-20..&lt;/text&gt;&lt;rect x="267.01" y="54.58" width="7" height="2.04" stroke-width="0.01" fill="#EDEDED"&gt;&lt;/rect&gt;&lt;text x="267.21" y="56.08" fill="#000000"&gt;WH&lt;/text&gt;&lt;text x="274.21" y="56.08" fill="#000000"&gt;0.75&lt;/text&gt;&lt;line x1="259.01" y1="50.00" x2="259.01" y2="56.72" stroke="#053581" stroke-width="0.1" fill="#053581"&gt;&lt;/line&gt;&lt;line x1="267.01" y1="50.00" x2="267.01" y2="56.72" stroke="#053581" stroke-width="0.1" fill="#053581"&gt;&lt;/line&gt;&lt;line x1="274.01" y1="50.00" x2="274.01" y2="56.72" stroke="#053581" stroke-width="0.1" fill="#053581"&gt;&lt;/line&gt;&lt;/g&gt;'
  </code></pre>
  
  <p>I need to replace all the occurrence of text tag with empty. I have used the following code :</p>
  
  <pre><code>var textstring = svgstring.match('(&lt;text.*&lt;\/text&gt;)');
  if(textstring[1]){
      textstring = textstring.replace(textstring[1],"");
  }
  </code></pre>
  
  <p>But it is replacing every thing including the rect tags inside it and getting the following result:</p>
  
  <p><code>&lt;g class='DG56   bundleGroup'&gt;&lt;image width="3" height="3" transform="translate(248.01,46.5)" xlink:href="images/icons/plug.svg"&gt;&lt;/image&gt;&lt;rect etype ="connector" nodex = "249.01" nodey = 50.00 stroke="#fff" fill="#fff" fill-opacity="0" stroke-opacity="0" transform="translate(249.06,47.15)" width="1.15" height="1.84"  ondblclick="app.gui.editProperties('249.01', '50.00');" onclick="app.drawing.ConSpliceClick('56', evt, '249.01', '50.00');" /&gt;&lt;g node="127"&gt;&lt;g transform="translate(259.01,55.00) scale(1 1) rotate(0)"&gt;&lt;image width="25" height="25" xlink:href="taskassets//noImage.jpg?key=1444900697"/&gt;&lt;/g&gt;&lt;/g&gt;&lt;g node='126'&gt;&lt;g font-size="1.6" font-family="DejaVu Sans" stroke="none" fill="#000000"&gt;&lt;rect x="254.01" y="50.00" width="29" height="2.24" stroke="#053581" stroke-width="0.1" fill="#b2b8c3"/&gt;&lt;/g&gt;&lt;/g&gt;</code></p>
  
  <p>But I need to replace only <code>&lt;text ... &lt;/text&gt;</code> . Please help me with this.</p>