抓取文本标签内容，并使用javascript将其替换为自定义文本

Question

Hi Below is my svg section

<g transform="translate(86.91003147398621,-21.306040772755345)" class="nv-label">
    <rect style="fill-opacity: 0; stroke-opacity: 0;"></rect>
    <text dy=".35em" style="fill-opacity: 1; fill: rgb(85, 85, 85); text-anchor: start;">Test Content</text>
</g>

Here, I need to get the text "Test Content" and replace it with some number, how can I do this with javascript?

Any help would be appreciated.

Answer 1

As you have mentioned there are multiple g tags, you can use document.querySelectorAll('g text')[1]; to get the element reference of second text inside g tag and then change the value using textContent . (answer updated based on OP comment)

 var textElem = document.querySelectorAll('g text')[1]; textElem.textContent = 1111; 

 <g transform="translate(86.91003147398621,-21.306040772755345)" class="nv-label"> <rect style="fill-opacity: 0; stroke-opacity: 0;"></rect> <text dy=".35em" style="fill-opacity: 1; fill: rgb(85, 85, 85); text-anchor: start;">Test Content</text> </g> <br/> <g transform="translate(86.91003147398621,-21.306040772755345)" class="nv-label"> <rect style="fill-opacity: 0; stroke-opacity: 0;"></rect> <text dy=".35em" style="fill-opacity: 1; fill: rgb(85, 85, 85); text-anchor: start;">Test Content</text> </g> <br/> <g transform="translate(86.91003147398621,-21.306040772755345)" class="nv-label"> <rect style="fill-opacity: 0; stroke-opacity: 0;"></rect> <text dy=".35em" style="fill-opacity: 1; fill: rgb(85, 85, 85); text-anchor: start;">Test Content</text> </g> 

Answer 2

This could help you, take a look :D

 function changeText(){ var svg = document.querySelector('g'); svg.lastElementChild.innerText = "hello World" } changeText(); 

 <g transform="translate(86.91003147398621,-21.306040772755345)" class="nv-label"> <rect style="fill-opacity: 0; stroke-opacity: 0;"></rect> <text dy=".35em" style="fill-opacity: 1; fill: rgb(85, 85, 85); text-anchor: start;">Test Content</text> </g> 

Answer 3

What I think many other answers are neglecting to give you is advice on how to set up your SVG so that you can easily find your text element later.

The normal way to do that is to give the text element an id attribute. Then later you can find it by calling getElementById() .

 var textElem = document.getElementById("mytext"); textElem.textContent = "1234"; 

 <svg> <text id="mytext" y="100">Test Content</text> </svg> 

There are other ways you could mark your element. You could do it by class :

 var allTextElems = document.getElementsByClassName("mytext"); for (var i=0; i< allTextElems.length; i++) { allTextElems.item(i).textContent = "1234"; }; 

 <svg> <text class="mytext" y="75">Test Content</text> <text class="notmytext" y="100">Test Content</text> <text class="mytext" y="125">Test Content</text> </svg> 

Or you could do it using a data attribute:

 var allTextElems = document.querySelectorAll('[data-key=mytext]'); allTextElems.forEach(function(item) { item.textContent = "1234"; }); 

 <svg> <text data-key="mytext" y="75">Test Content</text> <text data-key="notmytext" y="100">Test Content</text> <text data-key="mytext" y="125">Test Content</text> </svg> 

If you can't modify the SVG for some reason, then the next obvious solution would be to locate the text element using its position in the DOM tree relative to other elements.

 // Select the first text element in the group which has class="two" var textElem = document.querySelector("g.two text:first-child"); textElem.textContent = "1234"; 

 <svg> <g class="one"> <text y="50">Text in group 1</text> </g> <g class="two"> <text id="mytext" y="100">Test Content</text> <text y="125">Other text in group 2</text> </g> </svg> 

If you don't know where in the file the target text will be, you only know what the text contains, then you would need to search all the text elements to find the one with the correct text.

 // Select the SVG we want to search // (This is an example of what you would need to do if you had more than one svg on the page) var mySvg = document.querySelector("#mysvg"); // Find all the text elements in that svg var allTextElems = document.querySelectorAll("text"); // Check all the text elements found, and if they contain our text // then replace it with the new text. allTextElems.forEach(function(item) { if (item.textContent === "Test Content") { item.textContent = "1234"; } }); 

 <svg id="mysvg"> <g class="one"> <text y="50">Text in group 1</text> </g> <g class="two"> <text id="mytext" y="100">Test Content</text> <text y="125">Other text in group 2</text> </g> </svg>