Как получить тег на странице html, если я знаю, что содержит текстовый тег. Например:.
<a ...>SearchingText</a>
Вам нужно будет передвигаться вручную.
var aTags = document.getElementsByTagName("a");
var searchText = "SearchingText";
var found;
for (var i = 0; i < aTags.length; i++) {
if (aTags[i].textContent == searchText) {
found = aTags[i];
break;
}
}
// Use `found`.
Вы можете использовать xpath для достижения этой цели
var xpath = "//a[text()='SearchingText']";
var matchingElement = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
Вы также можете искать элемент, содержащий некоторый текст, используя этот xpath:
var xpath = "//a[contains(text(),'Searching')]";
Вы можете использовать jQuery : contains() Селектор
var element = $( "a:contains('SearchingText')" );
Используя самый современный синтаксис, доступный на данный момент, это можно сделать очень чисто:
for (const a of document.querySelectorAll("a")) {
if (a.textContent.includes("your search term")) {
console.log(a.textContent)
}
}
Или с отдельным фильтром:
[...document.querySelectorAll("a")]
.filter(a => a.textContent.includes("your search term"))
.forEach(a => console.log(a.textContent))
Естественно, устаревшие браузеры не справятся с этим, но вы можете использовать транспилятор, если необходима прежняя поддержка.
Хотя прошло довольно много времени, и вы уже (давно) приняли ответ, я подумал, что предлагаю обновленный подход:
function findByTextContent(needle, haystack, precise) {
// needle: String, the string to be found within the elements.
// haystack: String, a selector to be passed to document.querySelectorAll(),
// NodeList, Array - to be iterated over within the function:
// precise: Boolean, true - searches for that precise string, surrounded by
// word-breaks,
// false - searches for the string occurring anywhere
var elems;
// no haystack we quit here, to avoid having to search
// the entire document:
if (!haystack) {
return false;
}
// if haystack is a string, we pass it to document.querySelectorAll(),
// and turn the results into an Array:
else if ('string' == typeof haystack) {
elems = [].slice.call(document.querySelectorAll(haystack), 0);
}
// if haystack has a length property, we convert it to an Array
// (if it already an array, this is pointless, but not harmful):
else if (haystack.length) {
elems = [].slice.call(haystack, 0);
}
// work out whether we're looking at innerText (IE), or textContent
// (in most other browsers)
var textProp = 'textContent' in document ? 'textContent' : 'innerText',
// creating a regex depending on whether we want a precise match, or not:
reg = precise === true ? new RegExp('\\b' + needle + '\\b') : new RegExp(needle),
// iterating over the elems array:
found = elems.filter(function(el) {
// returning the elements in which the text is, or includes,
// the needle to be found:
return reg.test(el[textProp]);
});
return found.length ? found : false;;
}
findByTextContent('link', document.querySelectorAll('li'), false).forEach(function(elem) {
elem.style.fontSize = '2em';
});
findByTextContent('link3', 'a').forEach(function(elem) {
elem.style.color = '#f90';
});<ul>
<li><a href="#">link1</a>
</li>
<li><a href="#">link2</a>
</li>
<li><a href="#">link3</a>
</li>
<li><a href="#">link4</a>
</li>
<li><a href="#">link5</a>
</li>
</ul>Функциональный подход. Возвращает массив всех совпадающих элементов и выравнивает пробелы во время проверки.
function getElementsByText(str, tag = 'a') {
return Array.prototype.slice.call(document.getElementsByTagName(tag)).filter(el => el.textContent.trim() === str.trim());
}
Использование
getElementsByText('Text here'); // second parameter is optional tag (default "a")
если вы просматриваете разные теги, т.е. диапазон или кнопку
getElementsByText('Text here', 'span');
getElementsByText('Text here', 'button');
Значению по умолчанию для тега = 'a' понадобится Babel для старых браузеров
Я нашел использование более синтаксиса немного короче по сравнению с другими ответами. Итак, здесь мое предложение:
const callback = element => element.innerHTML == 'My research'
const elements = Array.from(document.getElementsByTagName('a'))
// [a, a, a, ...]
const result = elements.filter(callback)
console.log(result)
// [a]
Просто введите подстроку в следующую строку:
Внешний HTML
document.documentElement.outerHTML.includes('substring')
Внутренний HTML
document.documentElement.innerHTML.includes('substring')
Пока можно получить внутренний текст, я думаю, что вы движетесь неправильно. Является ли эта внутренняя строка динамически генерируемой? Если это так, вы можете дать тегу класс или - еще лучше - ID, когда текст там будет. Если он статичен, то это еще проще.
Я думаю, вам нужно быть более конкретным для нас, чтобы помочь вам.
Если текст уникален (или действительно, если нет, но вам придется запускать массив), вы можете запустить регулярное выражение, чтобы найти его. Использование PHP preg_match() будет работать для этого.
Если вы используете Javascript и можете вставить атрибут идентификатора, вы можете использовать getElementById ('id'). Затем вы можете получить доступ к атрибутам возвращаемого элемента через DOM: https://developer.mozilla.org/en/DOM/element.1.
Вы можете использовать TreeWalker, чтобы просмотреть узлы DOM, найти все текстовые узлы, которые содержат текст, и вернуть их родителей:
const findNodeByContent = (text, root = document.body) => {
const treeWalker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
const nodeList = [];
while (treeWalker.nextNode()) {
const node = treeWalker.currentNode;
if (node.nodeType === Node.TEXT_NODE && node.textContent.includes(text)) {
nodeList.push(node.parentNode);
}
};
return nodeList;
}
const result = findNodeByContent('SearchingText');
console.log(result);<a ...>SearchingText</a>Это делает работу.
Возвращает массив узлов, содержащий text.
function get_nodes_containing_text(selector, text) {
const elements = [...document.querySelectorAll(selector)];
return elements.filter(
(element) =>
element.childNodes[0]
&& element.childNodes[0].nodeValue
&& RegExp(text, "u").test(element.childNodes[0].nodeValue.trim())
);
}
Мне просто нужен способ получить элемент, содержащий конкретный текст, и это то, что я придумал.
Используйте document.getElementsByInnerText() для получения нескольких элементов (несколько элементов могут иметь одинаковый точный текст) и используйте document.getElementByInnerText() для получения только одного элемента (первое совпадение).
Кроме того, вы можете локализовать поиск, используя элемент (например, someElement.getElementByInnerText()) вместо document.
Вам может потребоваться настроить его, чтобы сделать его кросс-браузером или удовлетворить ваши потребности.
Я думаю, что код не требует пояснений, поэтому я оставлю его как есть.
HTMLElement.prototype.getElementsByInnerText = function (text, escape) {
var nodes = this.querySelectorAll("*");
var matches = [];
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].innerText == text) {
matches.push(nodes[i]);
}
}
if (escape) {
return matches;
}
var result = [];
for (var i = 0; i < matches.length; i++) {
var filter = matches[i].getElementsByInnerText(text, true);
if (filter.length == 0) {
result.push(matches[i]);
}
}
return result;
};
document.getElementsByInnerText = HTMLElement.prototype.getElementsByInnerText;
HTMLElement.prototype.getElementByInnerText = function (text) {
var result = this.getElementsByInnerText(text);
if (result.length == 0) return null;
return result[0];
}
document.getElementByInnerText = HTMLElement.prototype.getElementByInnerText;
console.log(document.getElementsByInnerText("Text1"));
console.log(document.getElementsByInnerText("Text2"));
console.log(document.getElementsByInnerText("Text4"));
console.log(document.getElementsByInnerText("Text6"));
console.log(document.getElementByInnerText("Text1"));
console.log(document.getElementByInnerText("Text2"));
console.log(document.getElementByInnerText("Text4"));
console.log(document.getElementByInnerText("Text6"));<table>
<tr>
<td>Text1</td>
</tr>
<tr>
<td>Text2</td>
</tr>
<tr>
<td>
<a href="#">Text2</a>
</td>
</tr>
<tr>
<td>
<a href="#"><span>Text3</span></a>
</td>
</tr>
<tr>
<td>
<a href="#">Special <span>Text4</span></a>
</td>
</tr>
<tr>
<td>
Text5
<a href="#">Text6</a>
Text7
</td>
</tr>
</table>Версия JQuery:
$('a').each(function(i) {
var $element = $(this)[i];
if( $element.text() == 'Your Text' ) {
/** Do Something */
}
});