☰

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

tag-icon • tag-icon google-chrome
Поиск с учетом регистра в Google Chrome

Есть ли способ учитывать регистр при поиске страниц в Google Chrome?

скриншот браузера

Допустим, я ищу "Дерево" и хочу исключить все варианты, такие как "дерево" или "ДЕРЕВО", которые не соответствуют искомому случаю. Возможно ли это?

решение1

TL;DR (по состоянию на февраль 2022 г.):

Еще нет, нов конце концов.

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

График

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

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

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

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

  • В 2018 году в базовый движок Blink была добавлена ​​поддержка поиска на странице с учетом регистра.(вместе с другими опциями, такими как «совпадение со всем словом»). Но эта функциональность по-прежнему не представлена ​​в собственном пользовательском интерфейсе Chrome.

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

решение2

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

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

  • В Windows просто нажмите F12один раз.
  • Для платформ, отличных от Windows, или если F12он недоступен, вы можете использовать Ctrl+ Shift+ I
    (этоверхний регистр-глаз, нестрочная-ell)

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

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

введите описание изображения здесь

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

2: Поиск исходного кода HTML:

введите описание изображения здесь

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

3: Поиск в реальном времени по DOM (с XPath, чувствительным к регистру):

Поиск Live 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 действительно добавит параметры чувствительности к регистру в будущем... может быть... в конечном итоге... когда-нибудь, я надеюсь.

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

Сравнение:

Опция с учетом регистра Целое слово Режим регулярных выражений Режим XPath SPA-совместимый
Ctrl+F на веб-странице Нет Нет Нет Нет Да
Просмотреть исходный код > Ctrl+F Нет Нет Нет Нет Нет
Инструменты разработчика > Поиск Да Нет Да Нет Нет
Инструменты разработчика > Элементы > Ctrl+F Только с XPath Нет Нет Да Да
Инструменты разработчика > Источники > Ctrl+F Да Нет Да Нет Нет

решение3

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

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 Букмарклет

решение4

Вы можете использоватьНайти и заменить для редактирования текстаилиfind+ | Инструмент поиска на странице с регулярными выражениями,ГитхабилиFindRрасширения для поиска с учетом регистра в Chrome.

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

Связанный контент