How to get element by innerText

Question

How to get tag in html page  if I know what text tag contains  E g     lt a     gt SearchingText lt  a gt

User · Answer

Simply pass your substring into the following line    Outer HTML  document documentElement outerHTML includes  substring     Inner HTML  document documentElement innerHTML includes  substring     You can use these to search through the entire document and retrieve the tags that contain your search term    function get elements by inner word        res          elems       document getElementsByTagName  a         elems forEach  elem    gt             if elem outerHTML includes word                 res push elem                       return res      Usage    How many times is the user  T3rm1  mentioned on this page   get elements by inner  T3rm1   length   1  How many times is jQuery mentioned   get elements by inner  jQuery   length   3  Get all elements containing the word  Cybernetic    get elements by inner  Cybernetic

User · Answer

I found the use of the newer syntax a little bit shorter compared to the others answer. So here's my proposal:

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

User · Answer

While it s possible to get by the inner text  I think you are heading the wrong way   Is that inner string dynamically generated  If so  you can give the  tag a class or -- better yet -- ID when the text goes in there   If it s static  then it s even easier

User · Answer

You can use jQuery  contains   Selector  var element       a contains  SearchingText

User · Answer

You can use a TreeWalker to go over the DOM nodes  and locate all text nodes that contain the text  and return their parents    x000D   x000D  const findNodeByContent    text  root   document body    gt    x000D    const treeWalker   document createTreeWalker root  NodeFilter SHOW TEXT   x000D   x000D    const nodeList       x000D   x000D    while  treeWalker nextNode      x000D      const node   treeWalker currentNode  x000D   x000D      if  node nodeType     Node TEXT NODE  amp  amp  node textContent includes text     x000D        nodeList push node parentNode   x000D        x000D       x000D   x000D    return nodeList  x000D    x000D   x000D  const result   findNodeByContent  SearchingText    x000D   x000D  console log result   x000D   lt a     gt SearchingText lt  a gt  x000D   x000D   x000D

User · Answer

This does the job  Returns an array of nodes containing text   function get nodes containing text selector  text        const elements       document querySelectorAll selector         return elements filter         element    gt          element childNodes 0           amp  amp  element childNodes 0  nodeValue          amp  amp  RegExp text   u   test element childNodes 0  nodeValue trim

User · Answer

Functional approach  Returns array of all matched elements and trims spaces around while checking   function getElementsByText str  tag    a       return Array prototype slice call document getElementsByTagName tag   filter el   gt  el textContent trim       str trim         Usage  getElementsByText  Text here       second parameter is optional tag  default  a     if you re looking through different tags i e  span or button  getElementsByText  Text here    span    getElementsByText  Text here    button      The default value tag    a  will need Babel for old browsers

User · Answer

To get the filter method from user1106925 working in <=IE11 if needed

You can replace the spread operator with:

[].slice.call(document.querySelectorAll("a"))

and the includes call with a.textContent.match("your search term")

which works pretty neatly:

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

User · Answer

I think you ll need to be a bit more specific for us to help you    How are you finding this  Javascript  PHP  Perl  Can you apply an ID attribute to the tag    If the text is unique  or really  if it s not  but you d have to run through an array  you could run a regular expression to find it  Using PHP s preg match   would work for that   If you re using Javascript and can insert an ID attribute  then you can use getElementById  id    You can then access the returned element s attributes through the DOM  https   developer mozilla org en DOM element 1

User · Answer

I ve just needed a way to get the element that contains a specific text and this is what I came up with   Use document getElementsByInnerText   to get multiple elements  multiple elements might have the same exact text   and use document getElementByInnerText   to get just one element  first match    Also  you can localize the search by using an element  e g  someElement getElementByInnerText    instead of document   You might need to tweak it in order to make it cross-browser or satisfy your needs   I think the code is self-explanatory  so I ll leave it as it is    x000D   x000D  HTMLElement prototype getElementsByInnerText   function  text  escape    x000D      var nodes    this querySelectorAll       x000D      var matches       x000D      for  var i   0  i  lt  nodes length  i      x000D          if  nodes i  innerText    text    x000D              matches push nodes i    x000D            x000D        x000D      if  escape    x000D          return matches  x000D        x000D      var result       x000D      for  var i   0  i  lt  matches length  i      x000D          var filter   matches i  getElementsByInnerText text  true   x000D          if  filter length    0    x000D              result push matches i    x000D            x000D        x000D      return result  x000D     x000D  document getElementsByInnerText   HTMLElement prototype getElementsByInnerText  x000D   x000D  HTMLElement prototype getElementByInnerText   function  text    x000D      var result   this getElementsByInnerText text   x000D      if  result length    0  return null  x000D      return result 0   x000D    x000D  document getElementByInnerText   HTMLElement prototype getElementByInnerText  x000D   x000D  console log document getElementsByInnerText  Text1     x000D  console log document getElementsByInnerText  Text2     x000D  console log document getElementsByInnerText  Text4     x000D  console log document getElementsByInnerText  Text6     x000D   x000D  console log document getElementByInnerText  Text1     x000D  console log document getElementByInnerText  Text2     x000D  console log document getElementByInnerText  Text4     x000D  console log document getElementByInnerText  Text6     x000D   lt table gt  x000D       lt tr gt  x000D           lt td gt Text1 lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D           lt td gt Text2 lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D           lt td gt  x000D               lt a href     gt Text2 lt  a gt  x000D           lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D           lt td gt  x000D               lt a href     gt  lt span gt Text3 lt  span gt  lt  a gt  x000D           lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D           lt td gt  x000D               lt a href     gt Special  lt span gt Text4 lt  span gt  lt  a gt  x000D           lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D           lt td gt  x000D              Text5 x000D               lt a href     gt Text6 lt  a gt  x000D              Text7 x000D           lt  td gt  x000D       lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

x000D   x000D  function findByTextContent needle  haystack  precise    x000D       needle  String  the string to be found within the elements  x000D       haystack  String  a selector to be passed to document querySelectorAll    x000D                 NodeList  Array - to be iterated over within the function  x000D       precise  Boolean  true - searches for that precise string  surrounded by x000D                                word-breaks  x000D                         false - searches for the string occurring anywhere x000D    var elems  x000D   x000D       no haystack we quit here  to avoid having to search x000D       the entire document  x000D    if   haystack    x000D      return false  x000D      x000D       if haystack is a string  we pass it to document querySelectorAll    x000D       and turn the results into an Array  x000D    else if   string     typeof haystack    x000D      elems      slice call document querySelectorAll haystack   0   x000D      x000D       if haystack has a length property  we convert it to an Array x000D        if it s already an array  this is pointless  but not harmful   x000D    else if  haystack length    x000D      elems      slice call haystack  0   x000D      x000D   x000D       work out whether we re looking at innerText  IE   or textContent  x000D        in most other browsers  x000D    var textProp    textContent  in document    textContent     innerText   x000D         creating a regex depending on whether we want a precise match  or not  x000D      reg   precise     true   new RegExp    b    needle      b     new RegExp needle   x000D         iterating over the elems array  x000D      found   elems filter function el    x000D           returning the elements in which the text is  or includes  x000D           the needle to be found  x000D        return reg test el textProp    x000D          x000D    return found length   found   false   x000D    x000D   x000D   x000D  findByTextContent  link   document querySelectorAll  li    false  forEach function elem    x000D    elem style fontSize    2em   x000D      x000D   x000D  findByTextContent  link3    a   forEach function elem    x000D    elem style color     f90   x000D      x000D   lt ul gt  x000D     lt li gt  lt a href     gt link1 lt  a gt  x000D     lt  li gt  x000D     lt li gt  lt a href     gt link2 lt  a gt  x000D     lt  li gt  x000D     lt li gt  lt a href     gt link3 lt  a gt  x000D     lt  li gt  x000D     lt li gt  lt a href     gt link4 lt  a gt  x000D     lt  li gt  x000D     lt li gt  lt a href     gt link5 lt  a gt  x000D     lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    Of course  a somewhat simpler way still is    x000D   x000D  var textProp    textContent  in document    textContent     innerText   x000D   x000D     directly converting the found  a  elements into an Array  x000D     then iterating over that array with Array prototype forEach    x000D     slice call document querySelectorAll  a    0  forEach function aEl    x000D       if the text of the aEl Node contains the text  link1   x000D    if  aEl textProp  indexOf  link1    gt  -1    x000D         we update its style  x000D      aEl style fontSize    2em   x000D      aEl style color     f90   x000D      x000D      x000D   lt ul gt  x000D     lt li gt  lt a href     gt link1 lt  a gt  x000D     lt  li gt  x000D     lt li gt  lt a href     gt link2 lt  a gt  x000D     lt  li gt  x000D     lt li gt  lt a href     gt link3 lt  a gt  x000D     lt  li gt  x000D     lt li gt  lt a href     gt link4 lt  a gt  x000D     lt  li gt  x000D     lt li gt  lt a href     gt link5 lt  a gt  x000D     lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    References    Array prototype filter    Array prototype forEach    Array prototype slice    Conditional   ternary   assessment   ifTrue   ifFalse  operator  Function prototype call    typeof operator

User · Answer

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

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, legacy browsers won't handle this, but you can use a transpiler if legacy support is needed.

User · Answer

You ll have to traverse by hand   var aTags   document getElementsByTagName  a    var searchText    SearchingText   var found   for  var i   0  i  lt  aTags length  i        if  aTags i  textContent    searchText        found   aTags i       break            Use  found

User · Answer

You could use xpath to accomplish this  var xpath      a text    SearchingText     var matchingElement   document evaluate xpath  document  null  XPathResult FIRST ORDERED NODE TYPE  null  singleNodeValue    You can also search of an element containing some text using this xpath   var xpath      a contains text    Searching

[javascript] How to get element by innerText

The answer is

Examples related to javascript

Examples related to jquery

Examples related to innertext

Tags