Identify all elements that include the designated text within an SVG element

Question

Identify all elements that include the designated text within an SVG element

I want to target all elements that have a specific text within an SVG tag.

For example, you can use the following code snippet:

[...document.querySelectorAll("*")].filter(e => e.childNodes && [...e.childNodes].find(n => n.nodeValue?.match("something")))

Alternatively, you can refer to another solution provided in this post.

How do I select this text element based on its content?

<body>
  <svg>
    <g>
      <text>something</text>
    </g>
  </svg>
</body>

javascript typescript svg dom

Answer 1

Answer №1

Utilizing the

[...document.querySelectorAll("*")]

technique involves extracting the nodeValue from each and every element.
This process places the burden on the (slower) JavaScript Engine to handle.

Alternatively, you can leverage the TreeWalker API to specifically target TextNodes.
Here, the responsibility shifts to the (faster) Browser Engine.

IE9 was the final browser to integrate the TreeWalker API, making this approach available for over a decade now...
(despite this, some individuals still opt for the more sluggish jQuery contains or similar methods)

TreeWalker API

#Text Nodes possess nodeType 4
and keep in mind that whitespace characters (space, return, tab) separating nodes are considered TextNodes
Note that nodeNames within the HTML NameSpace are UPPERCASE;
while those within SVG NameSpace are lowercase

<body>
  <svg something>
    <g id=somethingelse>
      <text id=ONE>something</text>
      <text id=TWO>nothing</text>
    </g>
  </svg>
</body>
<script>
  function findNodes(
    str = '', 
    root = document.body
  ) {
    let tree = document.createTreeWalker(root, 4);
    let nodes = [];
    let node;
    while (node = tree.nextNode()) {
      if (node.parentNode.nodeName === "text" 
          && 
          node.data.includes(str)) {
        nodes.push(node);
      }
    }
    console.log('Find:', str)
    nodes.map((text, idx, arr) => {
      console.log(`${idx+1}/${arr.length} `, text.data, ' in:', text.parentNode.id);
    });
    return nodes;
  }
  findNodes('something');
  findNodes('thing');
</script>

Answer 2

Utilizing the

[...document.querySelectorAll("*")]

technique involves extracting the nodeValue from each and every element.
This process places the burden on the (slower) JavaScript Engine to handle.

Alternatively, you can leverage the TreeWalker API to specifically target TextNodes.
Here, the responsibility shifts to the (faster) Browser Engine.

IE9 was the final browser to integrate the TreeWalker API, making this approach available for over a decade now...
(despite this, some individuals still opt for the more sluggish jQuery contains or similar methods)

TreeWalker API

#Text Nodes possess nodeType 4
and keep in mind that whitespace characters (space, return, tab) separating nodes are considered TextNodes
Note that nodeNames within the HTML NameSpace are UPPERCASE;
while those within SVG NameSpace are lowercase

<body>
  <svg something>
    <g id=somethingelse>
      <text id=ONE>something</text>
      <text id=TWO>nothing</text>
    </g>
  </svg>
</body>
<script>
  function findNodes(
    str = '', 
    root = document.body
  ) {
    let tree = document.createTreeWalker(root, 4);
    let nodes = [];
    let node;
    while (node = tree.nextNode()) {
      if (node.parentNode.nodeName === "text" 
          && 
          node.data.includes(str)) {
        nodes.push(node);
      }
    }
    console.log('Find:', str)
    nodes.map((text, idx, arr) => {
      console.log(`${idx+1}/${arr.length} `, text.data, ' in:', text.parentNode.id);
    });
    return nodes;
  }
  findNodes('something');
  findNodes('thing');
</script>

Identify all elements that include the designated text within an SVG element

Answer №1

Similar questions

Creating a typewriter effect with Vue Js

Search for a specific folder and retrieve its file path

Leverage the power of Angular.JS and ng-table to effectively summarize values in your

What is the best way to process the bytes from xhr.responseText?

Sending JSON Data from C# to External JavaScript File without Using a Web Server

The error "Prop does not exist on type 'PropsWithChildren'" occurs when attempting to dispatch an action with react-redux

Working with TypeScript: Overriding a Parent Constructor

The columnFilter plugin in Datatables is failing to initialize

Discovering the file names of JavaScript files within a context path and dynamically loading them

Limiting the size of images within a specific section using CSS

`Error encountered when attempting to convert date with Angular JS filter`

Error message: Encountered JavaScript heap out-of-memory error during Azure DevOps React Container Production Build

Having trouble getting the ValidatorPipe to function properly in my nest.js application

How to store angular 2 table information generated using ngFor

Creating dynamic form fields in Flask WTForm based on user's previous selection is a useful feature that can be achieved with some

Tips for crafting interactive Dropdown menus

The accuracy of the fromPointToLatLng function in Google Map's JS API seems to be inconsistent with the actual events

Navigating the issue of "Experiencing additional hooks rendered compared to the previous render"

Troubleshooting: Bootstrap 5 Alert not Displaying on Website

How should event listeners be unbound and child elements removed in single page applications?