Как найти див текст

Because textContent is not supported in IE8 and older, here is a workaround:

var node = document.getElementById('test'),
var text  = node.textContent || node.innerText;
alert(text);

innerText does work in IE.

answered Nov 9, 2016 at 15:51

You can use innerHTML(then parse text from HTML) or use innerText.

let textContentWithHTMLTags = document.querySelector('div').innerHTML; 
let textContent = document.querySelector('div').innerText;

console.log(textContentWithHTMLTags, textContent);

innerHTML and innerText is supported by all browser(except FireFox < 44) including IE6.

answered Dec 7, 2018 at 12:56

Actually you dont need to call document.getElementById() function to get access to your div.

You can use this object directly by id:

text = test.textContent || test.innerText;
alert(text);

Вопрос OP касается простого JavaScript, а не jQuery. Хотя ответов много, и мне нравится ответ @Pawan Nogariya, пожалуйста, ознакомьтесь с этой альтернативой.

Вы можете использовать XPATH в JavaScript. Больше информации о статье MDN здесь.

document.evaluate() Метод оценивает запрос / выражение XPATH. Таким образом, вы можете передать туда выражения XPATH, перейти в HTML-документ и найти нужный элемент.

В XPATH вы можете выбрать элемент с помощью текстового узла, как показано ниже, который получает div который имеет следующий текстовый узел.

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

Чтобы получить элемент, содержащий некоторый текст, используйте следующее:

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

contains() Метод в XPATH принимает узел в качестве первого параметра и текст для поиска в качестве второго параметра.

Проверьте этот план здесь, это пример использования XPATH в JavaScript

Вот фрагмент кода:

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";  

Как видите, я могу взять элемент HTML и изменить его так, как мне нравится.

Вы можете использовать это довольно простое решение:

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

1. Array.from преобразует NodeList в массив (есть несколько способов сделать это, например, оператор распространения или срез)

2. Теперь результат в виде массива позволяет использовать Array.find метод, вы можете затем вставить любой предикат. Вы также можете проверить textContent с помощью регулярных выражений или что угодно.

Обратите внимание, что Array.from а также Array.find Особенности ES2015. Быть совместимым со старыми браузерами, такими как IE10, без транспилятора:

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

Так как вы спросили об этом в JavaScript, чтобы вы могли иметь что-то вроде этого

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

А потом назови это так

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

Это решение делает следующее:

• Использует оператор распространения ES6 для преобразования NodeList всех div с массивом.

• Обеспечивает вывод, если div содержит строку запроса, а не только в том случае, если она точно равна строке запроса (что происходит для некоторых других ответов). Например, он должен обеспечивать вывод не только для SomeText, но и для SomeText, текст продолжается.

• Выводит весь div содержимое, а не только строка запроса. Например, для “SomeText, текст продолжается” следует выводить всю эту строку, а не только “SomeText”.

• Позволяет для нескольких div s, чтобы содержать строку, а не только один div,

[...document.querySelectorAll('div')]      // get all the divs in an array
  .map(div => div.innerHTML)               // get their contents
  .filter(txt => txt.includes('SomeText')) // keep only those containing the query
  .forEach(txt => console.log(txt));       // output the entire contents of those

<div>SomeText, text continues.</div>
<div>Not in this div.</div>
<div>Here is more SomeText.</div>

Столкнувшись с этим в 2021 году, я обнаружил, что использование XPATH слишком сложно (нужно научиться чему-то еще) для чего-то, что должно быть довольно простым.

Придумал это:

      function querySelectorIncludesText (selector, text){
  return Array.from(document.querySelectorAll(selector))
    .find(el => el.textContent.includes(text));
}

Применение:

      querySelectorIncludesText('button', 'Send')

Обратите внимание, что я решил использовать
includes и не строгое сравнение, потому что это то, что мне действительно нужно, не стесняйтесь адаптироваться.

Эти полифилы могут понадобиться, если вы хотите поддерживать все браузеры:

        /**
   * String.prototype.includes() polyfill
   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes#Polyfill
   * @see https://vanillajstoolkit.com/polyfills/stringincludes/
   */
  if (!String.prototype.includes) {
    String.prototype.includes = function (search, start) {
      'use strict';

      if (search instanceof RegExp) {
        throw TypeError('first argument must not be a RegExp');
      }
      if (start === undefined) {
        start = 0;
      }
      return this.indexOf(search, start) !== -1;
    };
  }

Лучше всего посмотреть, есть ли у вас родительский элемент div, к которому вы обращаетесь. Если это так, получите родительский элемент и выполните element.querySelectorAll("div"), Как только вы получите nodeList применить фильтр к нему над innerText имущество. Предположим, что родительский элемент div, к которому мы обращаемся, имеет id из container, Обычно вы можете получить доступ к контейнеру напрямую из идентификатора, но давайте сделаем это правильно.

var conty = document.getElementById("container"),
     divs = conty.querySelectorAll("div"),
    myDiv = [...divs].filter(e => e.innerText == "SomeText");

Итак, это все.

Если вы не хотите использовать jquery или что-то подобное, вы можете попробовать это:

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 && 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 < nodes.length; i++){ 
    //do something with nodes[i]
} 

Когда у вас есть узлы в массиве, которые содержат текст, вы можете что-то с ними сделать. Как предупреждение каждого или распечатать на консоль. Одно предостережение в том, что это может не обязательно захватывать div как таковые, это будет захватывать родителя текстового узла, в котором находится текст, который вы ищете.

Для Google это лучший результат для тех, кому нужно найти узел с определенным текстом. В порядке обновления, список узлов теперь итеративен в современных браузерах без необходимости преобразования его в массив.

Решение может использовать forEach, как так.

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
    }
});

Это сработало для меня, чтобы найти / заменить текст внутри списка узлов, когда обычный селектор не мог выбрать только один узел, поэтому мне пришлось фильтровать каждый узел один за другим, чтобы проверить его на предмет стрелки.

Используйте XPath и document.evaluate (), и убедитесь, что используете text(), а не. для аргумента contains (), иначе у вас будет весь HTML или самый внешний элемент div.

var headings = document.evaluate("//h1[contains(text(), 'Hello')]", document, null, XPathResult.ANY_TYPE, null );

или игнорировать начальные и конечные пробелы

var headings = document.evaluate("//h1[contains(normalize-space(text()), 'Hello')]", document, null, XPathResult.ANY_TYPE, null );

или соответствовать всем типам тегов (div, h1, p и т. д.)

var headings = document.evaluate("//*[contains(text(), 'Hello')]", document, null, XPathResult.ANY_TYPE, null );

Затем итерации

let thisHeading;
while(thisHeading = headings.iterateNext()){
    // thisHeading contains matched node
}

Поскольку нет ограничений на длину текста в атрибуте данных, используйте атрибуты данных! И затем вы можете использовать обычные селекторы css для выбора ваших элементов, как того хочет OP.

for (const element of document.querySelectorAll("*")) {
  element.dataset.myInnerText = element.innerText;
}

document.querySelector("*[data-my-inner-text='Different text.']").style.color="blue";

<div>SomeText, text continues.</div>
<div>Different text.</div>

В идеале вы выполняете часть настройки атрибутов данных при загрузке документа и немного сужаете селектор querySelectorAll для повышения производительности.

Здесь уже есть много отличных решений. Однако, чтобы предоставить более оптимизированное решение и еще одно, соответствующее идее поведения и синтаксиса querySelector, я выбрал решение, которое расширяет Object парой функций-прототипов. Обе эти функции используют регулярные выражения для сопоставления текста, однако строка может быть предоставлена ​​как свободный параметр поиска.

Просто реализуйте следующие функции:

// 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)=>{
        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];
}

После реализации этих функций вы можете выполнять следующие вызовы:

• document.queryInnerTextAll('div.link', 'go');
  Это найдет все дивы, содержащие ссылку класс со словом идти в InnerText (например. Налево или идти вниз или идти прямо или это Go О.Д.)
• document.queryInnerText('div.link', 'go');
  Это будет работать точно так же, как в приведенном выше примере, за исключением того, что вернет только первый соответствующий элемент.
• document.queryInnerTextAll('a', /^Next$/);
  Найдите все ссылки с точным текстом Далее (с учетом регистра). Это исключит ссылки, содержащие слово Next вместе с другим текстом.
• document.queryInnerText('a', /next/i);
  Найдите первую ссылку, содержащую слово ” следующий”, независимо от регистра (например, ” Следующая страница” или ” Перейти к следующему”).
• e = document.querySelector('#page');
e.queryInnerText('button', /Continue/);
  Это выполняет поиск в элементе контейнера кнопки, содержащей текст ” Продолжить” (с учетом регистра). (например, ” Продолжить” или ” Перейти к следующему”, но не продолжить)

Вот подход XPath, но с минимумом жаргона XPath.

Обычный выбор на основе значений атрибутов элемента (для сравнения):

// for matching <element class="foo bar baz">...</element> by 'bar'
var things = document.querySelectorAll('[class*="bar"]');
for (var i = 0; i < things.length; i++) {
    things[i].style.outline = '1px solid red';
}

Выбор XPath на основе текста внутри элемента.

// for matching <element>foo bar baz</element> by 'bar'
var things = document.evaluate('//*[contains(text(),"bar")]',document,null,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,null);
for (var i = 0; i < things.snapshotLength; i++) {
    things.snapshotItem(i).style.outline = '1px solid red';
}

А вот и нечувствительность к регистру, поскольку текст более изменчив:

// for matching <element>foo bar baz</element> 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 < things.snapshotLength; i++) {
    things.snapshotItem(i).style.outline = '1px solid red';
}

Я искал способ сделать что-то подобное с помощью Regex и решил создать что-то свое, чем хотел бы поделиться, если другие ищут подобное решение.

      function getElementsByTextContent(tag, regex) {
  const results = Array.from(document.querySelectorAll(tag))
        .reduce((acc, el) => {
          if (el.textContent && el.textContent.match(regex) !== null) {
            acc.push(el);
          }
          return acc;
        }, []);
  return results;
}

У меня была аналогичная проблема.

Функция, возвращающая все элементы, включающие текст из аргумента.

Это работает для меня:

function getElementsByText(document, str, tag = '*') {
return [...document.querySelectorAll(tag)]
    .filter(
        el => (el.text && el.text.includes(str))
            || (el.children.length === 0 && el.outerText && el.outerText.includes(str)))

}