Поиск HTML-элемента по содержимому текста в JavaScript

Быстрый ответ

Для быстрого поиска элемента по значению innerText, используйте XPath в JavaScript таким образом:

function getElementByText(text) {
  const xpath = `//node()[normalize-space(text())='${text.trim()}']`;
  return document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}

const myElement = getElementByText("Точный текст");
console.log(myElement); // Вот и бережно искомый элемент перед вами!

Замените "Точный текст" на ту строку, которую вы хотите найти. Эта функция проходит через документ с помощью XPath, подобно исполнительной поисковой собаке.

Погрузимся поглубже: понимание XPath и textContent

Прецизионное управление с XPath

Применение XPath в JavaScript допускает точный поиск элементов, которые идентичны указанному тексту. Отметим, что textContent извлекает все текстовые данные, включая скрытые, в то время как innerText может быть подвержен влиянию стилей CSS. Если вам требуется найти скрытый текст, то лучше всего использовать textContent.

Подробнее об этом расскажет наш спикер на видео

Умелое управление сборниками узлов

Когда работаете с большим объемом информации, например, с параграфами статьи, методы getElementsByTagName и querySelectorAll становятся незаменимыми союзниками. Они возвращают коллекции элементов, которые удобны для перебора:

const textToFind = "Искомый запрос";
let matchingElements = [];
document.querySelectorAll('p').forEach(p => {
  if (p.textContent.includes(textToFind)) {
    matchingElements.push(p);
  }
});

console.log(matchingElements);

Из прошлого в будущее: что нам дает jQuery

Помните дни, когда jQuery брал верх за счёт селектора :contains()? Он предложил простой способ для текстового поиска:

const myElement = $("*:contains('Точный текст')")[0];
console.log(myElement); // И вот напоминание о былых временах.

Помните, что :contains() учитывает регистр, так что учтите этот нюанс во время своего поиска.

Визуализация 🎬

Представьте себе, что в огромной библиотеке вам нужно найти одну уникальную книгу, исходя из определённого текста внутри неё:

Библиотека 📚: [Книга1, Книга2, Книга3, ..., КнигаН]

Текст: "Секрет успеха — начать."

Проходя рядами, наша задача — отыскать нужную нам книгу:

🔍📖: Книга1 -> Не она
🔍📖: Книга2 -> Всё ещё не она
🔍📖: Книга3 -> Вот она! ✨

В итоге вы получите элемент, как будто искали его через innerText:

let foundElement;
document.querySelectorAll('*').forEach(el => {
  if (el.textContent.trim() === "Секрет успеха — начать.") {
    foundElement = el;
  }
});

В нашем примере каждая книга соответствует элементу DOM, а поиск нужного текста аналогичен получению элементов через innerText.

Обзор краевых сценариев

Сценарий 1: Нормализация текста для точного поиска

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

let searchText = " Мой текст ";
searchText = searchText.trim().replace(/\s+/g, ' ');

Сценарий 2: Соответствие требованиям старых браузеров

Для поддержки старых браузеров возможно потребуется использовать транспиляторы, такие как Babel, особенно если они не поддерживают такие методы как document.evaluate().

Сценарий 3: Создание собственной функции поиска

Создание своего способа получения элементов, наподобие getElementsByText, существенно ускорит процесс поиска по определённым тегам или классам:

function getElementsByText(text, tag = '*') {
  let foundElements = [];
  for (let el of document.getElementsByTagName(tag)) {
    if (el.textContent.trim() === text) {
      foundElements.push(el);
    }
  }
  return foundElements;
}

Сценарий 4: Использование оператора расширения для NodeList

Современный JavaScript позволяет преобразовывать NodeList в массив, что упрощает выполнение фильтрации и работы с элементами:

const allParagraphs = [...document.querySelectorAll('p')];
const matchingParagraphs = allParagraphs.filter(p => p.textContent.includes('Этот пудинг зачарован.'));

Полезные материалы 📚

1. Document: метод querySelector() – Web APIs | MDN — Подробное руководство по применению метода .querySelector() для поиска элементов в DOM.
2. javascript – Наиболее эффективный способ конвертации HTMLCollection в массив – Stack Overflow — Рекомендации по работе с коллекциями узлов в JavaScript.
3. Поиск: методы getElement, querySelector — Мощный обзор методов выбора элементов в DOM, включая getElement* и querySelector*.
4. Selectors Level 4 — Обсуждение передовых CSS-селекторов для работы с DOM.
5. javascript – Где лучше всего разместить теги <script> в HTML-разметке? – Stack Overflow — Рекомендации по оптимальному размещению тегов <script> в HTML-разметке.
6. Современное состояние HTML5 форм | CSS-Tricks — Обзор возможностей и функций HTML5-форм.