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