How to get innerText element

Question

How to get tag on html page if I know what the text tag contains. For example:.

<a ...>SearchingText</a> 

Answer 1

You will need to move around manually.

 var aTags = document.getElementsByTagName("a"); var searchText = "SearchingText"; var found; for (var i = 0; i < aTags.length; i++) { if (aTags[i].textContent == searchText) { found = aTags[i]; break; } } // Use `found`. 

Answer 2

You can use xpath to achieve this.

 var xpath = "//a[text()='SearchingText']"; var matchingElement = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue; 

You can also search for an element containing some text using this xpath:

 var xpath = "//a[contains(text(),'Searching')]"; 

Answer 3

You can use jQuery : contains () selector

 var element = $( "a:contains('SearchingText')" ); 

Answer 4

Using the most modern syntax available at the moment, this can be done very cleanly:

 for (const a of document.querySelectorAll("a")) { if (a.textContent.includes("your search term")) { console.log(a.textContent) } } 

Or with a separate filter:

 [...document.querySelectorAll("a")] .filter(a => a.textContent.includes("your search term")) .forEach(a => console.log(a.textContent)) 

Naturally, outdated browsers will not cope with this, but you can use the transpiler if you need previous support.

Answer 5

Although quite a lot of time has passed and you already (long ago) accepted the answer, I thought I was proposing an updated approach:

 function findByTextContent(needle, haystack, precise) { // needle: String, the string to be found within the elements. // haystack: String, a selector to be passed to document.querySelectorAll(), // NodeList, Array - to be iterated over within the function: // precise: Boolean, true - searches for that precise string, surrounded by // word-breaks, // false - searches for the string occurring anywhere var elems; // no haystack we quit here, to avoid having to search // the entire document: if (!haystack) { return false; } // if haystack is a string, we pass it to document.querySelectorAll(), // and turn the results into an Array: else if ('string' == typeof haystack) { elems = [].slice.call(document.querySelectorAll(haystack), 0); } // if haystack has a length property, we convert it to an Array // (if it already an array, this is pointless, but not harmful): else if (haystack.length) { elems = [].slice.call(haystack, 0); } // work out whether we're looking at innerText (IE), or textContent // (in most other browsers) var textProp = 'textContent' in document ? 'textContent' : 'innerText', // creating a regex depending on whether we want a precise match, or not: reg = precise === true ? new RegExp('\\b' + needle + '\\b') : new RegExp(needle), // iterating over the elems array: found = elems.filter(function(el) { // returning the elements in which the text is, or includes, // the needle to be found: return reg.test(el[textProp]); }); return found.length ? found : false;; } findByTextContent('link', document.querySelectorAll('li'), false).forEach(function(elem) { elem.style.fontSize = '2em'; }); findByTextContent('link3', 'a').forEach(function(elem) { elem.style.color = '#f90'; }); 

 <ul> <li><a href="#">link1</a> </li> <li><a href="#">link2</a> </li> <li><a href="#">link3</a> </li> <li><a href="#">link4</a> </li> <li><a href="#">link5</a> </li> </ul> 

Of course, an even simpler way:

 var textProp = 'textContent' in document ? 'textContent' : 'innerText'; // directly converting the found 'a' elements into an Array, // then iterating over that array with Array.prototype.forEach(): [].slice.call(document.querySelectorAll('a'), 0).forEach(function(aEl) { // if the text of the aEl Node contains the text 'link1': if (aEl[textProp].indexOf('link1') > -1) { // we update its style: aEl.style.fontSize = '2em'; aEl.style.color = '#f90'; } }); 

 <ul> <li><a href="#">link1</a> </li> <li><a href="#">link2</a> </li> <li><a href="#">link3</a> </li> <li><a href="#">link4</a> </li> <li><a href="#">link5</a> </li> </ul> 

Literature:

• Array.prototype.filter() .
• Array.prototype.forEach() .
• Array.prototype.slice() .
• Conditional ('ternary', assessment ? ifTrue : ifFalse ) statement .
• Function.prototype.call() .
• typeof .

Answer 6

Functional approach. Returns an array of all matching elements and aligns spaces during validation.

 function getElementsByText(str, tag = 'a') { return Array.prototype.slice.call(document.getElementsByTagName(tag)).filter(el => el.textContent.trim() === str.trim()); } 

Using

 getElementsByText('Text here'); // second parameter is optional tag (default "a") 

if you are viewing different tags, i.e. range or button

 getElementsByText('Text here', 'span'); getElementsByText('Text here', 'button'); 

The default value for the tag = 'a' will need Babel for older browsers

Answer 7

I found using more syntax a bit shorter compared to other answers. So here is my suggestion:

 const callback = element => element.innerHTML == 'My research' const elements = Array.from(document.getElementsByTagName('a')) // [a, a, a, ...] const result = elements.filter(callback) console.log(result) // [a] 

JSfiddle.net

Answer 8

As long as you can get the inner text, I think that you are moving incorrectly. Is this inner string dynamically generated? If so, you can give the tag a class or - even better - an ID when the text is there. If it is static, then it is even easier.

Answer 9

I think you need to be more specific for us to help you.

• How do you find this? Javascript Php? Perl?
• Can you apply the ID attribute to a tag?

If the text is unique (or indeed, if not, but you have to run the array), you can run the regex to find it. Using PHP preg_match () will work for this.

If you use Javascript and can insert an identifier attribute, you can use getElementById ('id'). Then you can access the attributes of the returned element through the DOM: https://developer.mozilla.org/en/DOM/element.1 .

Answer 10

I just need a way to get an element containing specific text, and this is what I came up with.

Use document.getElementsByInnerText() to get multiple elements (multiple elements can have the same exact text) and use document.getElementByInnerText() to get only one element (first match).

Alternatively, you can localize the search using an element (e.g. someElement.getElementByInnerText() ) instead of document .

You may need to configure it to make it cross-browser or to meet your needs.

I think the code requires no explanation, so I will leave it as it is.

 HTMLElement.prototype.getElementsByInnerText = function (text, escape) { var nodes = this.querySelectorAll("*"); var matches = []; for (var i = 0; i < nodes.length; i++) { if (nodes[i].innerText == text) { matches.push(nodes[i]); } } if (escape) { return matches; } var result = []; for (var i = 0; i < matches.length; i++) { var filter = matches[i].getElementsByInnerText(text, true); if (filter.length == 0) { result.push(matches[i]); } } return result; }; document.getElementsByInnerText = HTMLElement.prototype.getElementsByInnerText; HTMLElement.prototype.getElementByInnerText = function (text) { var result = this.getElementsByInnerText(text); if (result.length == 0) return null; return result[0]; } document.getElementByInnerText = HTMLElement.prototype.getElementByInnerText; console.log(document.getElementsByInnerText("Text1")); console.log(document.getElementsByInnerText("Text2")); console.log(document.getElementsByInnerText("Text4")); console.log(document.getElementsByInnerText("Text6")); console.log(document.getElementByInnerText("Text1")); console.log(document.getElementByInnerText("Text2")); console.log(document.getElementByInnerText("Text4")); console.log(document.getElementByInnerText("Text6")); 

 <table> <tr> <td>Text1</td> </tr> <tr> <td>Text2</td> </tr> <tr> <td> <a href="#">Text2</a> </td> </tr> <tr> <td> <a href="#"><span>Text3</span></a> </td> </tr> <tr> <td> <a href="#">Special <span>Text4</span></a> </td> </tr> <tr> <td> Text5 <a href="#">Text6</a> Text7 </td> </tr> </table> 

Answer 11

JQuery Version:

 $ ('a'). each (function (i) {
     var $ element = $ (this) [i];

     if ($ element.text () == 'Your Text') {
         / ** Do Something * /
     }
 });