Javascript .querySelector buscar por innerTEXT

Solución:

La pregunta de OP es sobre simple JavaScript y no jQuery. Aunque hay muchas respuestas y me gusta la respuesta de @Pawan Nogariya, consulte esta alternativa.

Puedes usar XPATH en JavaScript. Más información sobre el artículo de MDN aquí.

los document.evaluate() El método evalúa una consulta / expresión XPATH. Entonces puede pasar expresiones XPATH allí, atravesar el documento HTML y ubicar el elemento deseado.

En XPATH puede seleccionar un elemento, por el nodo de texto como el siguiente, que obtiene el div que tiene el siguiente nodo de texto.

//div[text()="Hello World"]

Para obtener un elemento que contiene algo de texto, use lo siguiente:

//div[contains(., 'Hello')]

los contains() El método en XPATH toma un nodo como primer parámetro y el texto a buscar como segundo parámetro.

Compruebe este plunk aquí, este es un ejemplo de uso de XPATH en JavaScript

Aquí hay un fragmento de código:

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 += "<br />Modified contents";  

Como puede ver, puedo tomar el elemento HTML y modificarlo como quiera.

Podrías usar esta solución bastante simple:

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

1. los Array.from convertirá NodeList en una matriz (hay varios métodos para hacer esto, como el operador de propagación o el segmento)

2. El resultado ahora es una matriz que permite usar el Array.find método, puede colocar cualquier predicado. También puede verificar el contenido del texto con una expresión regular o lo que quiera.

Tenga en cuenta que Array.from y Array.find son características de ES2015. Ser compatible con navegadores más antiguos como IE10 sin un transpilador:

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

Como lo ha pedido en javascript, puede tener algo como esto

function contains(selector, text) {
  var elements = document.querySelectorAll(selector);
  return Array.prototype.filter.call(elements, function(element){
    return RegExp(text).test(element.textContent);
  });
}

Y luego llámalo así

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

---

---

Utiliza Nuestro Buscador