Как проверить, видна ли вхождение строки на странице, используя JavaScript

Question

Как проверить, видна ли вхождение строки на странице, используя JavaScript

0

Есть несколько вопросов, которые похожи на это. Но я не нашел этот точный вопрос о SO. (и ответа в другом месте).

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

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

UPDATE: Я знаю :contains и is(":visible") что не проблема. Элементы могут быть вложенными, конечно, и должны работать при любых обстоятельствах.

Peter 21 фев. 2014, в 14:44

Источник

0

Если строка имеет такое специфическое значение, разве она не будет заключена в span или аналогичный объект, например, который вы украсили атрибутом данных или классом, который должен облегчить это?
Nope 21 фев. 2014, в 13:08
0

Я ищу универсальное решение, я не знаю заранее, где его можно обернуть
Peter 21 фев. 2014, в 13:10
0

Хм ... Я думаю, что вам придется работать в обратном направлении от элемента, содержащего текст, и проверять видимость каждого родителя, пока не дойдете до элемента body.
CM Kanode 21 фев. 2014, в 13:10
0

Как это будет «скрыто»? С какой-либо собственностью css?
Alvaro 21 фев. 2014, в 13:12
0

с любым свойством CSS или JavaScript
Peter 21 фев. 2014, в 13:12
0

Это обернуто во всех обстоятельствах?
Alvaro 21 фев. 2014, в 13:12
0

@Peter: Я знаю, что это вам не поможет :( - Это кажется очень хрупким / хакерским. Если у вас есть важная строка на вашей странице, но она не настолько важна, чтобы обернуть ее в определенный элемент или класс, но достаточно важна, чтобы Если вы хотите основывать функциональность на его вхождении, то реализация выглядит очень странно / ненадежно. Если текст скрыт с помощью CSS, тогда используйте селекторы из разных стилей CSS для определения вхождения. Если у вас есть скрипт, случайным образом скрывающий текст без использования классов или атрибутов, тогда что реализация этого сценария также является нестабильной.
Nope 21 фев. 2014, в 13:17
0

@ FrancoisWahl, как я уже сказал: я ищу что-нибудь. родовой. Я настраиваю тест-приложение. Я хочу, чтобы конечные пользователи могли сказать: «этот текст должен быть видимым, но больше не видимым, когда я нажимаю эту кнопку», и тому подобное. Мне известно множество фреймворков для подобных случаев, но это другое обсуждение.
Peter 21 фев. 2014, в 13:21
0

Скажем, вы ищете «ааа», хотите, чтобы «<span> а </ span> аа» соответствовали? Пользователь увидит «ааа», но принять во внимание такие случаи довольно сложно (вам может понадобиться целый анализатор HTML).
Jasper 21 фев. 2014, в 14:10
0

@Japer: хорошая мысль. В этом случае я бы хотел, чтобы это соответствовало. Но все это не такая проблема в реальной жизни для меня. Принятого ответа было достаточно, чтобы решить мои проблемы.
Peter 21 фев. 2014, в 14:19
0

минус избиратель, объясните пожалуйста
Peter 24 июнь 2015, в 06:03

Показать ещё 9 комментариев

Теги:

javascript

jquery

visibility

2 ответа

0

Вы можете использовать : содержит над вашим телом элемент вместе с length, которая подсчитывает количество совпадений.

if($('body:contains("demo")').length){
    alert("The world exists");
}else{
    alert("The world doesn't exist");   
};

Alvaro 21 фев. 2014, в 11:16

0

Это также с учетом невидимого текста
Peter 21 фев. 2014, в 13:02

Ещё вопросы

Если строка имеет такое специфическое значение, разве она не будет заключена в span или аналогичный объект, например, который вы украсили атрибутом данных или классом, который должен облегчить это?
Я ищу универсальное решение, я не знаю заранее, где его можно обернуть
Хм ... Я думаю, что вам придется работать в обратном направлении от элемента, содержащего текст, и проверять видимость каждого родителя, пока не дойдете до элемента body.
Как это будет «скрыто»? С какой-либо собственностью css?
Это обернуто во всех обстоятельствах?
@Peter: Я знаю, что это вам не поможет :( - Это кажется очень хрупким / хакерским. Если у вас есть важная строка на вашей странице, но она не настолько важна, чтобы обернуть ее в определенный элемент или класс, но достаточно важна, чтобы Если вы хотите основывать функциональность на его вхождении, то реализация выглядит очень странно / ненадежно. Если текст скрыт с помощью CSS, тогда используйте селекторы из разных стилей CSS для определения вхождения. Если у вас есть скрипт, случайным образом скрывающий текст без использования классов или атрибутов, тогда что реализация этого сценария также является нестабильной.
@ FrancoisWahl, как я уже сказал: я ищу что-нибудь. родовой. Я настраиваю тест-приложение. Я хочу, чтобы конечные пользователи могли сказать: «этот текст должен быть видимым, но больше не видимым, когда я нажимаю эту кнопку», и тому подобное. Мне известно множество фреймворков для подобных случаев, но это другое обсуждение.
Скажем, вы ищете «ааа», хотите, чтобы «<span> а </ span> аа» соответствовали? Пользователь увидит «ааа», но принять во внимание такие случаи довольно сложно (вам может понадобиться целый анализатор HTML).
@Japer: хорошая мысль. В этом случае я бы хотел, чтобы это соответствовало. Но все это не такая проблема в реальной жизни для меня. Принятого ответа было достаточно, чтобы решить мои проблемы.
минус избиратель, объясните пожалуйста
Это также с учетом невидимого текста

Salman A · Accepted Answer · 2014-02-21T11-04-00.000Z

Следующее должно работать, но это не самое эффективное решение:

$("body, body *").contents().filter(function () {
    return this.nodeType === 3 && this.nodeValue.indexOf("Foo & Bar") >= 0;
}).parent(":visible");

Этот код:

Обнаруживает все текстовые узлы в документе, которые содержат указанную строку ¹
И проверяет, отображается ли их родительский ²

¹ Это означает самый глубокий узел, который содержит строку. Селектор :contains селектор, будет бесполезным, поскольку он может вернуть видимый элемент (на самом деле ветвь элементов), содержащий невидимый дочерний элемент, содержащий указанную строку.

² Элемент отображается, если его родители также видны

Салман, отличная работа! Я должен сделать еще несколько тестов и принять его позже, но в каждом случае
У меня сейчас не будет времени на тщательное тестирование, я согласился, поэтому не могу забыть. Очень простой тест можно найти здесь: jsfiddle.net/7caG5/1
Я только что проверил это на сайте, который использует всплывающие меню. При поиске текста, который находится во всплывающем меню, он возвращает ноль узлов, когда всплывающее окно скрыто, и один узел, когда меню видно. Так что я уверен, что это должно сработать.
Хорошо, еще раз, о вашем редактировании заголовка: я знаю, что jquery - это инфраструктура js, но я хотел получить ответ либо в jquery, либо в простой js. Не в любой другой JS Framework. Не берите в голову, у меня уже есть мой ответ