Javascript querySelector find div by innerTEXT

Question

How can I find DIV with certain text  For example    lt div gt  SomeText  text continues   lt  div gt    Trying to use something like this   var text   document querySelector  div SomeText     innerTEXT  alert text     But ofcourse it will not work  How can I do it

User · Answer

You could use this pretty simple solution:

Array.from(document.querySelectorAll('div'))
  .find(el => el.textContent === 'SomeText, text continues.');

The Array.from will convert the NodeList to an array (there are multiple methods to do this like the spread operator or slice)
The result now being an array allows for using the Array.find method, you can then put in any predicate. You could also check the textContent with a regex or whatever you like.

Note that Array.from and Array.find are ES2015 features. Te be compatible with older browsers like IE10 without a transpiler:

Array.prototype.slice.call(document.querySelectorAll('div'))
  .filter(function (el) {
    return el.textContent === 'SomeText, text continues.'
  })[0];

User · Answer

OP s question is about plain JavaScript and not jQuery  Although there are plenty of answers and I like  Pawan Nogariya answer  please check this alternative out   You can use XPATH in JavaScript  More info on the MDN article here   The document evaluate   method evaluates an XPATH query expression  So you can pass XPATH expressions there  traverse into the HTML document and locate the desired element   In XPATH you can select an element  by the text node like the following  whch gets the div that has the following text node     div text    Hello World     To get an element that contains some text use the following     div contains     Hello      The contains   method in XPATH takes a node as first parameter and the text to search for as second parameter   Check this plunk here  this is an example use of XPATH in JavaScript  Here is a code snippet   var headings   document evaluate    h1 contains     Hello      document  null  XPathResult ANY TYPE  null    var thisHeading   headings iterateNext     console log thisHeading      Prints the html element in console console log thisHeading textContent      prints the text content in console  thisHeading innerHTML      lt br   gt Modified contents       As you can see  I can grab the HTML element and modify it as I like

User · Answer

You best see if you have a parent element of the div you are querying  If so get the parent element and perform an element querySelectorAll  div    Once you get the nodeList apply a filter on it over the innerText property  Assume that a parent element of the div that we are querying has an id of container  You can normally access container directly from the id but let s do it the proper way   var conty   document getElementById  container         divs   conty querySelectorAll  div        myDiv       divs  filter e   gt  e innerText     SomeText      So that s it

User · Answer

Here s the XPath approach but with a minimum of XPath jargon   Regular selection based on element attribute values  for comparison       for matching  lt element class  foo bar baz  gt     lt  element gt  by  bar  var things   document querySelectorAll   class   bar      for  var i   0  i  lt  things length  i          things i  style outline    1px solid red       XPath selection based on text within element      for matching  lt element gt foo bar baz lt  element gt  by  bar  var things   document evaluate      contains text    bar     document null XPathResult ORDERED NODE SNAPSHOT TYPE null   for  var i   0  i  lt  things snapshotLength  i          things snapshotItem i  style outline    1px solid red       And here s with case-insensitivity since text is more volatile      for matching  lt element gt foo bar baz lt  element gt  by  bar  case-insensitively var things   document evaluate      contains translate text    ABCDEFGHIJKLMNOPQRSTUVWXYZ   abcdefghijklmnopqrstuvwxyz    bar     document null XPathResult ORDERED NODE SNAPSHOT TYPE null   for  var i   0  i  lt  things snapshotLength  i          things snapshotItem i  style outline    1px solid red

User · Answer

Since you have asked it in javascript so you can have something like this  function contains selector  text      var elements   document querySelectorAll selector     return Array prototype filter call elements  function element       return RegExp text  test element textContent             And then call it like this  contains  div    sometext       find  div  that contain  sometext  contains  div     sometext       find  div  that start with  sometext  contains  div    sometext  i      find  div  that end with  sometext   case-insensitive

User · Answer

If you don t want to use jquery or something like that then you can try this   function findByText rootElement  text       var filter             acceptNode  function node                  look for nodes that are text nodes and include the following string              if node nodeType     document TEXT NODE  amp  amp  node nodeValue includes text                     return NodeFilter FILTER ACCEPT                            return NodeFilter FILTER REJECT                      var nodes           var walker   document createTreeWalker rootElement  NodeFilter SHOW TEXT  filter  false       while walker nextNode              give me the element containing the node        nodes push walker currentNode parentNode             return nodes       call it like var nodes   findByText document body  SomeText      then do what you will with nodes    for var i   0  i  lt  nodes length  i            do something with nodes i       Once you have the nodes in an array that contain the text you can do something with them  Like alert each one or print to console  One caveat is that this may not necessarily grab divs per se  this will grab the parent of the textnode that has the text you are looking for

User · Answer

Google has this as a top result for For those who need to find a node with certain text  By way of update  a nodelist is now iterable in modern browsers without having to convert it to an array   The solution can use forEach like so   var elList   document querySelectorAll   some  selector    elList forEach function el        if  el innerHTML indexOf  needle       -1               Do what you like with el            The needle is case sensitive             This worked for me to do a find replace text inside a nodelist when a normal selector could not choose just one node so I had to filter each node one by one to check it for the needle

User · Answer

I had similar problem    Function that return all element which include text from arg    This works for me   function getElementsByText document  str  tag          return     document querySelectorAll tag        filter          el   gt   el text  amp  amp  el text includes str                   el children length     0  amp  amp  el outerText  amp  amp  el outerText includes str

User · Answer

Since there are no limits to the length of text in a data attribute  use data attributes  And then you can use regular css selectors to select your element s  like the OP wants    x000D   x000D  for  const element of document querySelectorAll         x000D    element dataset myInnerText   element innerText  x000D    x000D   x000D  document querySelector    data-my-inner-text  Different text      style color  blue   x000D   lt div gt SomeText  text continues  lt  div gt  x000D   lt div gt Different text  lt  div gt  x000D   x000D   x000D    Ideally you do the data attribute setting part on document load and narrow down the querySelectorAll selector a bit for performance

User · Answer

This solution does the following    Uses the ES6 spread operator to convert the NodeList of all divs to an array  Provides output if the div contains the query string  not just if it exactly equals the query string  which happens for some of the other answers   e g  It should provide output not just for  SomeText  but also for  SomeText  text continues   Outputs the entire div contents  not just the query string  e g  For  SomeText  text continues  it should output that whole string  not just  SomeText   Allows for multiple divs to contain the string  not just a single div     x000D   x000D      document querySelectorAll  div            get all the divs in an array x000D     map div   gt  div innerHTML                   get their contents x000D     filter txt   gt  txt includes  SomeText       keep only those containing the query x000D     forEach txt   gt  console log txt             output the entire contents of those x000D   lt div gt SomeText  text continues  lt  div gt  x000D   lt div gt Not in this div  lt  div gt  x000D   lt div gt Here is more SomeText  lt  div gt  x000D   x000D   x000D

User · Answer

There are lots of great solutions here already  However  to provide a more streamlined solution and one more in keeping with the idea of a querySelector behavior and syntax  I opted for a solution that extends Object with a couple prototype functions  Both of these functions use regular expressions for matching text  however  a string can be provided as a loose search parameter  Simply implement the following functions     find all elements with inner text matching a given regular expression    args           selector  string query selector to use for identifying elements on which we                    should check innerText         regex  A regular expression for matching innerText  if a string is provided                 a case-insensitive search is performed for any element containing the string  Object prototype queryInnerTextAll   function selector  regex        if  typeof regex       string   regex   new RegExp regex   i         const elements       this querySelectorAll selector        const rtn   elements filter  e   gt           return e innerText match regex                    return rtn length     0   null   rtn       find the first element with inner text matching a given regular expression    args           selector  string query selector to use for identifying elements on which we                    should check innerText         regex  A regular expression for matching innerText  if a string is provided                 a case-insensitive search is performed for any element containing the string  Object prototype queryInnerText   function selector  text       return this queryInnerTextAll selector  text  0      With these functions implemented  you can now make calls as follows   document queryInnerTextAll  div link    go    This would find all divs containing the link class with the word go in the innerText  eg  Go Left or GO down or go right or It s Good  document queryInnerText  div link    go    This would work exactly as the example above except it would return only the first matching element  document queryInnerTextAll  a     Next     Find all links with the exact text Next  case-sensitive   This will exclude links that contain the word Next along with other text  document queryInnerText  a    next i   Find the first link that contains the word next  regardless of case  eg  Next Page or Go to next  e   document querySelector   page    e queryInnerText  button    Continue    This performs a search within a container element for a button containing the text  Continue  case-sensitive    eg  Continue or Continue to Next but not continue

User · Answer

Use XPath and document evaluate    and make sure to use text   and not   for the contains   argument  or else you will have the entire HTML  or outermost div element matched   var headings   document evaluate    h1 contains text     Hello      document  null  XPathResult ANY TYPE  null      or ignore leading and trailing whitespace  var headings   document evaluate    h1 contains normalize-space text      Hello      document  null  XPathResult ANY TYPE  null      or match all tag types  div  h1  p  etc    var headings   document evaluate      contains text     Hello      document  null  XPathResult ANY TYPE  null      Then iterate  let thisHeading  while thisHeading   headings iterateNext            thisHeading contains matched node

[javascript] Javascript .querySelector find <div> by innerTEXT

Examples related to javascript

Examples related to innertext

Examples related to selectors-api