Поиск с учетом регистра в Google Chrome

Можно ли выполнять регистрозависимый поиск на странице в Google Chrome?

Допустим, я ищу слово “Tree” и хочу исключить все варианты, такие как “tree” или “TREE”, которые не соответствуют нужному регистру. Это возможно?

Краткое содержание (на февраль 2022):

Пока нет, но в будущем.

По состоянию на 2022 год, регистрозависимый поиск на странице существует в Chrome с 2018 года, но Google все еще не предоставил эту функциональность в интерфейсе.

Хронология

• На 6 апреля 2011 года этот запрос функции в Chromium (кодовая база с открытым исходным кодом Chrome) был отклонен:

  2011-04-06: jeff****@google.com

  Обсудили с UI-лидерами: Это было бы полезно иметь, но мы пока не хотим добавлять эту опцию в интерфейс.

• В 2017 году проблема была открыта снова как проблема 687552, и к началу 2022 года она все еще остается открытой.

• В 2018 году поддержка регистрозависимого поиска была добавлена в движок Blink (вместе с другими опциями, такими как “поиск по целому слову”). Однако эта функциональность еще не вынесена в интерфейс Chrome.

• На 31 января 2022 года мы все еще ждем, когда Google назначит команду UI/UX для разработки и реализации изменений в окне поиска на странице для поддержки этих опций.

Окно Инструментов разработчика в браузерах на базе Chromium (Chrome, Edge, Opera и др.) поддерживает регистрозависимый поиск (и регулярные выражения тоже!):

Чтобы открыть Инструменты разработчика для текущей вкладки:

• На Windows просто нажмите F12 один раз.
• Для других платформ или если F12 недоступен, можно использовать Ctrl+Shift+I
  _{(Это заглавная И, не маленькая Л)}

По состоянию на Chrome 97 (февраль 2022), вы можете искать в текущем документе с использованием Инструментов разработчика тремя разными способами:

1: Используйте панель “Поиск”

• (Эта функция была бы более подходяще названа как “Поиск по всем файлам”, на мой взгляд).
• Сначала откройте окно Инструментов разработчика (F12 или Ctrl+Shift+I)
• Затем, из окна Инструментов разработчика, существуют 2 способа его открытия:
  1. Способ 1: В любой вкладке нажмите клавишу Escape для открытия консольного ящика, затем нажмите на три точки, чтобы открыть меню Дополнительные инструменты, затем выберите “Поиск”:
     
  2. Способ 2: Нажмите на меню в правом верхнем углу, выберите Дополнительные инструменты и выберите “Поиск”:
     
• После открытия используйте кнопки рядом с текстовым полем поиска, чтобы включить режимы регистрозависимости и регулярных выражений.
• Однако у этого подхода есть недостатки:
  • Этот инструмент ищет в текстовом исходном коде всех файлов, используемых текущей страницей, включая другие HTML файлы, JavaScript .js код, CSS .css стили и т. д.), поэтому поиск таких терминов, как “var” или “title” будет давать много нерелевантных результатов.
    • К счастью, результаты сгруппированы по файлам, так что просто мысленно отсекайте результаты не из HTML.
  • Результаты поиска будет соответствовать исходному коду HTML файла или JS файла, вместо текущего представления DOM, так что этот подход не полезен для поиска так называемых одностраничных приложений (SPA), так как исходный HTML это просто загружающий загрузчик и не содержит текущего текстового контента страницы.
    • Поскольку поиск выполняется по текстовому источнику, а не по живому DOM, это также означает, что вы не можете дважды щелкнуть по результату поиска, чтобы основное окно браузера перешло к выделенному элементу. Вместо этого двойное нажатие покажет вам содержание на вкладке Источники в инструменте разработчика, а не на вкладке Элементы.

2: Поиск в исходном HTML:

• Хотя функция Chrome “Просмотр исходного кода…” позволяет использовать Ctrl+F для поиска в исходном HTML коде, ей все еще не хватает опций регистрозависимости и регулярных выражений, которые мы ищем.
  • Однако, у панели Источников в окне Инструментов разработчика есть своя собственная функция Ctrl+F, которая поддерживает режимы регистрозависимости и регулярных выражений.
• Как и при поиске в панели поиска, это не ищет в текущем живом DOM дереве, так что этот подход не будет работать для веб-страниц, где исходный HTML сильно отличается от живого DOM, отображаемого на вкладке Элементы, таких как SPA.

3: Поиск в живом DOM (с регистрозависимым XPath):

Поиск в живом DOM поддерживает только регистронезависимые текстовые поиски…

…но также поддерживает регистрозависимые запросы XPath:

• На вкладке Элементы нажмите Ctrl+F. Это позволит вам выполнять поиск по всему тексту документа DOM (включая HTML атрибуты).

• Так как это ищет в живом DOM, это работает с веб-страницами SPA и другими страницами, нагруженными скриптами.

• В поле поиска имеется 3 режима:

  1. Поиск текста (он только регистронезависимый, к сожалению)
  2. Поиск по CSS селектору (поддерживает регистрозависимые и регистронезависимые селекторы, но только для HTML элементов и атрибутов: вы не можете использовать CSS селектор для поиска в тексте DOM).
     • Для выполнения регистрозависимого поиска атрибутов HTML используйте elementName[attributeName="value"s].
     • Для выполнения регистронезависимого поиска атрибутов HTML используйте elementName[attributeName="value"i].
  3. Режим XPath (который поддерживает регистрозависимые поиски).
     • Запросы XPath чувствительны к регистру, и вы можете использовать некоторые функции XPath для выполнения регистронезависимых поисков.
     • Вы можете использовать любой XPath запрос. Например, попробуйте использовать //*[contains(text(),'Developer Tools')] (как на скриншоте выше).
     • Если вы не получите ожидаемых результатов, вы можете протестировать XPath запрос с помощью функции $x(), встроенной в консоль инструментов разработчика, например $x("//*[contains(text(),'Developer Tools')]") (как на скриншоте выше тоже).

• Однако, по состоянию на Chrome 97 он все еще не поддерживает регистрозависимость или регулярные выражения для текстовых поисков, что в значительной степени сводит на нет смысла использования этого подхода, если только вы не хотите изучать XPath, но я упоминаю его на случай, если Google когда-нибудь добавит опции регистрозависимости в будущем… может быть… в конечном счете… когда-нибудь, надеюсь.

• Еще одно преимущество этого подхода заключается в том, что вы можете непосредственно перейти к результатам поиска в вашем оригинальном веб-браузере, просто дважды щелкнув на элемент узла, содержащем нужный текст. Это невозможно с упомянутыми ранее методами поиска по исходному тексту.

Сравнение:

Вот функция, которая запрашивает слово и выполняет регистрозависимый поиск:

var searches = searches || 0;

(function () {
var count = 0,
    text;
text = prompt('Search:', '');
if (text == null || text.length === 0) return;

function searchWithinNode(node, re) {
    var pos, skip, acronym, middlebit, endbit, middleclone;
    skip = 0;
    if (node.nodeType === 3) {
        pos = node.data.search(re);
        if (pos >= 0) {
            acronym = document.createElement('ACRONYM');
            acronym.title="Search " + (searches + 1) + ': ' + re.toString();
            acronym.style.backgroundColor = backColor;
            acronym.style.borderTop = '1px solid ' + borderColor;
            acronym.style.borderBottom = '1px solid ' + borderColor;
            acronym.style.fontWeight="bold";
            acronym.style.color = borderColor;
            middlebit = node.splitText(pos);
            endbit = middlebit.splitText(RegExp.lastMatch.length);
            middleclone = middlebit.cloneNode(true);
            acronym.appendChild(middleclone);
            middlebit.parentNode.replaceChild(acronym, middlebit);
            count++;
            skip = 1;
        }
    } else if (node.nodeType == 1 && node.childNodes && node.tagName.toUpperCase() != 'SCRIPT' && node.tagName.toUpperCase != 'STYLE') for (var child = 0; child < node.childNodes.length; ++child) child = child + searchWithinNode(node.childNodes[child], re);
    return skip;
}
var borderColor="#" + (searches + 8).toString(2).substr(-3).replace(/0/g, '3').replace(/1/g, '6');
var backColor = borderColor.replace(/3/g, 'c').replace(/6/g, 'f');
if (searches % 16 / 8 >= 1) {
    var tempColor = borderColor;
    borderColor = backColor;
    backColor = tempColor;
}
searchWithinNode(document.body, text);
window.status="Found " + count + ' match' + (count == 1 ? '' : 'es') + ' for ' + text + '.';
if (count > 0) searches++;
})();

Ее можно сохранить как закладку для быстрого доступа.

Ссылки

Закладка для поиска с использованием регулярных выражений

Закладка для выделения Regex

Существует также хороший плагин для этого: QuickFind

Вы можете использовать Find & Replace for Text Editing или find+ | Regex Find-in-Page Tool,Github или Расширение FindR для регистрозависимого поиска в Chrome.

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

Существует новое удобное расширение под названием https://chromewebstore.google.com/detail/text-search-pro/lfknakglefggmdkjdfhhofkjnnolffkh, которое позволяет выполнять регистрозависимый поиск

Индийский блогер Амит Агравал создал закладку для этой функции, которая может легко это сделать.

http://www.labnol.org/internet/case-sensitive-find/28186/