Finding An Html Element Based On Text Content

I have a html code like

TV

I want to find this span through documentObject having text 'TV', like getElementById etc ... some

Solution 1:

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.

Solution 2:

Only thing I can think of is something like this:

functiongetElementByTextContent(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 compatibilityreturn 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/