Finding an html element based on text content

Question

I have a html code like

<div>
   <span>TV</span>
</div>

I want to find this span through documentObject having text 'TV', like getElementById etc ... something like getElementByText. I know that it's possible through XPath/JQuery/Regex.

But I need it to get through DOM object model only. As only DOM model is available in my context. I see couple of answers:

But these are not helpful to me, as I need to get it through DOM model only.

Tim M. · Accepted Answer · 2011-12-22 06:20:12Z

Assuming the document is well-formed enough to parse into a proper DOM object tree, you can iterate through the entire structure without using an external library. Depending on the structure, you may have to examine every node to find all matches, and this may be slow. If you have access to IDs of any sort, you may be able to reduce search scope and improve performance.

The key property you will need is the childNodes collection on every DOM node. Starting with the BODY (or some other container), you can recurse through all the child nodes.

This site is pretty basic but shows dependency-free methods for accessing DOM elements. See the section called "Tools to Navigate to a Certain Element".

I noticed that you mentioned regular expressions as a means to find elements. Regexes are poor for parsing entire documents, but they can be very useful in evaluating the textual content of a single node (e.g. partial matches, pattern matches, case insensitivity, etc.) Regular expressions are part of the JavaScript language itself and have been so for well over a decade.

Joseph Marikle · Accepted Answer · 2011-12-22 06:14:19Z

1

Only thing I can think of is something like this:

function getElementByTextContent(text)
{
    var spanList = document.getElementsByTagName("span");
    for (var i = 0, len = spanList.length; i < len; i++)
    {
        if(spanList[i].textContent === text) // use .innerHTML if you need IE compatibility
        return spanList[i]
    }
}

of course it assumes you are only searching for <span> elements, but this might work for you. Here's a demo as well:

http://jsfiddle.net/uATdG/

answered Dec 22, 2011 at 6:14

Joseph Marikle

78.8k18 gold badges114 silver badges130 bronze badges

Comments

Ezequiel Alvarez · Accepted Answer · 2025-01-20 02:20:38Z

0

add "#:~:text=aaaa,bbbb" at the end of your url.

This finds and highlights everything between aaaa and bbbb. However, some times it does not work... I'm trying to figure it out why.. And this is why I landed here!

answered Jan 20 at 2:20

Ezequiel Alvarez

1

1 Comment

Community Jan 20 at 5:44

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Finding an html element based on text content

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related