Getting the id of an element which contains text

Question

how can I get the div id from a text? I only found Text from div.

<div id="randomdiv">Text</div>

You can use [`getElementsByTagName('*')`](http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-A6C9094) to get all the elements in say the body, then loop over them looking for the one whose [*textContent*](http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-textContent) is, or includes, the text you seek. — RobG, Jul 15 '14 at 12:32

score 4 · Answer 1 · answered Jul 15 '14 at 12:37

If you're using jQuery things are really easy.

var src = "Text"; // what to look for

$('*:contains("'+src.replace(/\"/g, '\"')+'")') // search all elements containing that text, also replace double quotes because it might break the selector
    .filter( function(){ 
        return $(this).text()==src;  // check for exact matches (this is slow btw)
    })
    .first() // retrieve the first element. you have to adjust if you're looking for all elements
    .attr('id'); // retrieve the id. this is semantic. it's faster to use [0].id instead of this

If you're not using jQuery you'll probably have 30-40 lines of code doing just this.

`[id]` instead of `*` in the selector would improve performance as it would avoid looping over elements which do not have an id but contains text. Or `body [id]` if targeting elements in the body only. — GillesC, Jul 15 '14 at 12:52

score 4 · Accepted Answer · answered Jul 15 '14 at 12:40

4

var divId = $("div:contains('Text')").attr('id');

alert(divId);  //divId is the div's id you need;

answered Jul 15 '14 at 12:40

Alien

3,658
1
16
33

Important to note that if there is more than one element containing `Text` and having an `id` only the first one will be returned using this approach. – GillesC Jul 15 '14 at 13:26
By the way, this function doesn't check to see if "Text" is the only thing inside that element. – Silviu-Marian Jul 16 '14 at 18:04

GillesC · Answer 3 · 2014-07-15T13:23:44.090

In pure javascript it's actually quite simple too.

Here is a little helper function which returns an array of ids base on a search string. If the second argument is true it will do a basic partial search instead of a strict check.

Javascript

NodeList.prototype.forEach = Array.prototype.forEach;

function getElementIdsByText(search, partial) {

    var elements = document.querySelectorAll("[id]");
    var ids = [];

    elements.forEach(function(element) {
        if (!partial && element.textContent === search) {
            ids.push(element.id);
        }

        if (partial && element.textContent.indexOf(search) !== -1) {
            ids.push(element.id);
        }
    });

    return ids;
}

console.log(getElementIdsByText("Text"));
console.log(getElementIdsByText("Fo", true));

HTML

<div id="randomdiv">Text</div>
<div id="randomdiv2">Text</div>
<div id="fooDiv">Foo</div>

Output

["randomdiv", "randomdiv2"]
["fooDiv"]

The NodeList.prototype.forEach = Array.prototype.forEach; is not needed of course you can use the slice method too to convert it to a normal array, but in theory the slice method is not guaranteed (not that I know if this one is!).

http://jsfiddle.net/A4XkY/2/

score -1 · Answer 4 · edited Jul 15 '14 at 12:52

-1

var id = $(":contains('Text')").attr('id');

This will Return All elements which contains the text "Text"

edited Jul 15 '14 at 12:52

SysDragon

9,692
15
60
89

answered Jul 15 '14 at 12:50

kheengz

840
12
10

Getting the id of an element which contains text

4 Answers4