-1

I have the SVG string as below: 

var svgstring =     '<g font-size="1.6" font-family="DejaVu Sans" stroke="none" fill="#000000"><rect x="254.01" y="50.00" width="29" height="2.24" stroke="#053581" stroke-width="0.1" fill="#b2b8c3"></rect><text x="254.21" y="51.6" font-size="1.6" font-weight="700" font-family="DejaVu Sans" stroke="none" fill="#000000">Cav.</text><text x="259.21" y="51.6" font-size="1.6" font-weight="700" font-family="DejaVu Sans" stroke="none" fill="#000000">Wire</text><text x="267.21" y="51.6" font-size="1.6" font-weight="700" font-family="DejaVu Sans" stroke="none" fill="#000000">Colour</text><text x="274.21" y="51.6" font-size="1.6" font-weight="700" font-family="DejaVu Sans" stroke="none" fill="#000000">Gauge</text><rect x="254.01" y="52.24" width="29" height="2.24" stroke="#053581" stroke-width="0.1" fill="#ffffff"></rect><text x="254.21" y="53.84" fill="#000000"> 1</text><text x="259.21" y="53.84" fill="#000000"> FPTO-20..</text><rect x="267.01" y="52.34" width="7" height="2.04" stroke-width="0.01" fill="#C1D5D9"></rect><text x="267.21" y="53.84" fill="#000000">GY</text><text x="274.21" y="53.84" fill="#000000"> 0.75</text><rect x="254.01" y="54.48" width="29" height="2.24" stroke="#053581" stroke-width="0.1" fill="#fff8c6"></rect><text x="254.21" y="56.08" fill="#000000">2</text><text x="259.21" y="56.08" fill="#000000">FPTO-20..</text><rect x="267.01" y="54.58" width="7" height="2.04" stroke-width="0.01" fill="#EDEDED"></rect><text x="267.21" y="56.08" fill="#000000">WH</text><text x="274.21" y="56.08" fill="#000000">0.75</text><line x1="259.01" y1="50.00" x2="259.01" y2="56.72" stroke="#053581" stroke-width="0.1" fill="#053581"></line><line x1="267.01" y1="50.00" x2="267.01" y2="56.72" stroke="#053581" stroke-width="0.1" fill="#053581"></line><line x1="274.01" y1="50.00" x2="274.01" y2="56.72" stroke="#053581" stroke-width="0.1" fill="#053581"></line></g>'

I need to replace all the occurrence of text tag with empty. I have used the following code :

var textstring = svgstring.match('(<text.*<\/text>)');
if(textstring[1]){
    textstring = textstring.replace(textstring[1],"");
}

But it is replacing every thing including the rect tags inside it and getting the following result:

<g class='DG56 bundleGroup'><image width="3" height="3" transform="translate(248.01,46.5)" xlink:href="images/icons/plug.svg"></image><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');" /><g node="127"><g transform="translate(259.01,55.00) scale(1 1) rotate(0)"><image width="25" height="25" xlink:href="taskassets//noImage.jpg?key=1444900697"/></g></g><g node='126'><g font-size="1.6" font-family="DejaVu Sans" stroke="none" fill="#000000"><rect x="254.01" y="50.00" width="29" height="2.24" stroke="#053581" stroke-width="0.1" fill="#b2b8c3"/></g></g>

But I need to replace only <text ... </text> . Please help me with this.

Asons
  • 84,923
  • 12
  • 110
  • 165
Vimalraj Velumani
  • 11
  • 1
  • 6

2 Answers2

0

Before someone links to this legendary answer I'd like to propose an alternative DOM-based solution:

var doc = document.createDocumentFragment();
var wrapper = document.createElement('svg');
wrapper.innerHTML = svgstring;
doc.appendChild( wrapper );

var textnodes = doc.querySelectorAll('text');
[].slice.call( textnodes ).forEach(function(txt){
    txt.parentNode.removeChild( txt );
});
// doc.firstChild.innerHTML is the `svgstring` with empty <text> nodes

http://jsfiddle.net/yxokcd9o/2/

Community
  • 1
  • 1
pawel
  • 35,827
  • 7
  • 56
  • 53
0

Perhaps you mean to call replace on svgstring, which will replace the pattern across the entire String, instead of replacing the pattern within the String textString[1], which will be missing the entire portion of the String you wish to keep.

Additionally as @stribizhev pointed out in the comments, using a regex (like .*? with the trailing ? or (?:.|\n) to accommodate extra new lines) that lazy matches the text within the <text<\/text> will help ensure the pattern doesn't skip from the first <text to the last <\/text>.

You can try:

(<text.*?<\/text>)

You probably also want to match each text element result, which means you want to add g modifier after expression in replace:

svgstring.replace(/(<text.*?<\/text>)/g, "");


var svgstring = '<g font-size="1.6" font-family="DejaVu Sans" stroke="none" fill="#000000"><rect x="254.01" y="50.00" width="29" height="2.24" stroke="#053581" stroke-width="0.1" fill="#b2b8c3"></rect><text x="254.21" y="51.6" font-size="1.6" font-weight="700" font-family="DejaVu Sans" stroke="none" fill="#000000">Cav.</text><text x="259.21" y="51.6" font-size="1.6" font-weight="700" font-family="DejaVu Sans" stroke="none" fill="#000000">Wire</text><text x="267.21" y="51.6" font-size="1.6" font-weight="700" font-family="DejaVu Sans" stroke="none" fill="#000000">Colour</text><text x="274.21" y="51.6" font-size="1.6" font-weight="700" font-family="DejaVu Sans" stroke="none" fill="#000000">Gauge</text><rect x="254.01" y="52.24" width="29" height="2.24" stroke="#053581" stroke-width="0.1" fill="#ffffff"></rect><text x="254.21" y="53.84" fill="#000000"> 1</text><text x="259.21" y="53.84" fill="#000000"> FPTO-20..</text><rect x="267.01" y="52.34" width="7" height="2.04" stroke-width="0.01" fill="#C1D5D9"></rect><text x="267.21" y="53.84" fill="#000000">GY</text><text x="274.21" y="53.84" fill="#000000">0.75</text><rect x="254.01" y="54.48" width="29" height="2.24" stroke="#053581" stroke-width="0.1" fill="#fff8c6"></rect><text x="254.21" y="56.08" fill="#000000">2</text><text x="259.21" y="56.08" fill="#000000">FPTO-20..</text><rect x="267.01" y="54.58" width="7" height="2.04" stroke-width="0.01" fill="#EDEDED"></rect><text x="267.21" y="56.08" fill="#000000">WH</text><text x="274.21" y="56.08" fill="#000000">0.75</text><line x1="259.01" y1="50.00" x2="259.01" y2="56.72" stroke="#053581" stroke-width="0.1" fill="#053581"></line><line x1="267.01" y1="50.00" x2="267.01" y2="56.72" stroke="#053581" stroke-width="0.1" fill="#053581"></line><line x1="274.01" y1="50.00" x2="274.01" y2="56.72" stroke="#053581" stroke-width="0.1" fill="#053581"></line></g>';


var textString = svgstring.replace(/(<text.*?<\/text>)/g, "");
document.getElementById('result').innerHTML = $('<div/>').text(textString).html();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id='result'></div>
Moishe Lipsker
  • 2,974
  • 2
  • 21
  • 29