☰

Pesquisas que diferenciam maiúsculas de minúsculas no Google Chrome

tag-icon • tag-icon google-chrome
Pesquisas que diferenciam maiúsculas de minúsculas no Google Chrome

Existe uma maneira de diferenciar maiúsculas de minúsculas em pesquisas de páginas no Google Chrome?

captura de tela do navegador

Digamos que estou procurando por "Árvore" e desejo excluir todas as variantes, como "árvore" ou "ÁRVORE", que não correspondem ao caso que estou procurando. Isso é possível?

Responder1

DR (em fevereiro de 2022):

Ainda não, maseventualmente.

Em 2022, a funcionalidade localizar na página com distinção entre maiúsculas e minúsculas existia no Chrome desde 2018, mas o Google ainda não expôs a funcionalidade na IU.

Linha do tempo

Responder2

OFerramentas de desenvolvimentojanela em navegadores baseados em Chromium (Chrome, Edge, Opera,etc.) suporta pesquisa com distinção entre maiúsculas e minúsculas (e expressões regulares também!):

Para abrir as Ferramentas do desenvolvedor na guia atual do navegador:

  • No Windows, basta pressionar F12uma vez.
  • Para plataformas não Windows, ou se F12não estiver disponível, você pode usar Ctrl+ Shift+ I
    (Essa é umamaiúscula-olho, não umletras minúsculas)

A partir do Chrome 97 (fevereiro de 2022), você pode pesquisar o documento atual usando as Ferramentas do desenvolvedor de três maneiras diferentes:

1: Use o painel "Pesquisar"

insira a descrição da imagem aqui

  • (Esse recurso seria melhor denominado "Pesquisar em todos os arquivos", imo).
  • Primeiro, abra a janela Ferramentas do desenvolvedor ( F12ou Ctrl+ Shift+ I)
  • Então, na janela Ferramentas do desenvolvedor, há duas maneiras de abri-la:
    1. Método 1: Em qualquer aba, pressione a Escapetecla para abrir a gaveta do Console e clique nos três pontos para abrir oMais ferramentasmenu e escolha "Pesquisar":
    2. Método 2: Clique no menu do canto superior direito, escolhaMais ferramentase escolha "Pesquisar":
  • Depois de aberto, use os botões ao redor da caixa de texto de pesquisa para alternar o modo de distinção entre maiúsculas e minúsculas e expressão regular.
  • Existem desvantagens em usar essa abordagem:
    • Esta ferramenta pesquisa a fonte do texto bruto detodos os arquivosusado pela página atual, incluindo outros arquivos HTML, .jsfonte JavaScript, .csstexto de estilos CSS, etc.), portanto, pesquisar um termo como "var" ou "título" produzirá muitos resultados irrelevantes.
      • Felizmente, os resultados são agrupados por arquivo, portanto, basta filtrar mentalmente os resultados da pesquisa que não sejam HTML.
    • Os resultados da pesquisa corresponderão à fonte original de um arquivo HTML ou JS em vez da representação HTML do DOM atual, portanto, esta abordagem não é útil para pesquisar os chamadosaplicativos de página única(SPAs), pois o HTML de origem é apenas um carregador de stub e não conterá o conteúdo textual da página atual.
      • Como as pesquisas são realizadas na fonte de texto e não no DOM ativo, isso significa também que você não pode clicar duas vezes em um resultado de pesquisa para fazer com que a janela principal do navegador salte para o elemento selecionado. Em vez disso, clicar duas vezes em um resultado mostrará o conteúdo da ferramenta do desenvolvedorFontesguia em vez da guia Elementos.

2: Pesquisa de fonte HTML:

insira a descrição da imagem aqui

  • Embora o recurso "Visualizar código-fonte..." do Chrome permita que você use Ctrl+ Fpara pesquisar a fonte HTML bruta original, ele ainda não possui as opções de pesquisa com distinção entre maiúsculas e minúsculas e expressões regulares que procuramos.
    • No entanto, a janela Ferramentas do desenvolvedorFontespainel tem seu próprio recurso de pesquisa Ctrl+ separado Fquefazsuporta modos de distinção entre maiúsculas e minúsculas e regex.
  • Tal como acontece com o painel de pesquisa, isso não pesquisa o atualao vivoÁrvore DOM, portanto, esta abordagem não funcionará para páginas da web onde o HTML original está muito distante do DOM ativo, conforme exibido na guia Elementos, como SPAs.

3: Live DOM Search (com XPath com distinção entre maiúsculas e minúsculas):

A pesquisa Live DOM suporta apenas pesquisas de texto que não diferenciam maiúsculas de minúsculas...

insira a descrição da imagem aqui

... mas também suporta consultas XPath com distinção entre maiúsculas e minúsculas:

insira a descrição da imagem aqui

  • NoElementosguia, pressione Ctrl+ F. Isso permite realizar uma pesquisa em todo o texto do DOM do documento (incluindo atributos HTML).

  • À medida que pesquisa o DOM ativo, ele funciona com páginas da web SPA e outras páginas com muitos scripts.

  • A caixa de pesquisa possui 3 modos:

    1. Pesquisa de texto (infelizmente, isso não diferencia maiúsculas de minúsculas)
    2. Pesquisa de seletor CSS (suporta seletores que diferenciam maiúsculas de minúsculas e que não diferenciam maiúsculas de minúsculas, mas apenas para nomes de elementos HTMLe atributos: você não pode usar um seletor CSS para corresponder ao texto DOM).
      • Para realizar uma pesquisa de atributos HTML com distinção entre maiúsculas e minúsculas, use elementName[attributeName="value"s].
      • Para realizar uma pesquisa de atributos HTML que não diferencia maiúsculas de minúsculas, use elementName[attributeName="value"i].
    3. Modo XPath(que suporta pesquisas com distinção entre maiúsculas e minúsculas).
      • As consultas XPath diferenciam maiúsculas de minúsculas e você pode usar algumas funções XPath para realizar pesquisas que não diferenciam maiúsculas de minúsculas.
      • Você pode usar qualquer consulta XPath. Por exemplo, tente usar //*[contains(text(),'Developer Tools')](conforme imagem acima).
      • Se você não obtiver os resultados esperados, poderá testar a consulta XPath com a $x()função integrada no console das Ferramentas do desenvolvedor, por exemplo $x("//*[contains(text(),'Developer Tools')]")(conforme a captura de tela acima também).

  • No entanto, a partir do Chrome 97ainda não suporta distinção entre maiúsculas e minúsculas ou expressões regularespara pesquisas de texto, o que anula totalmente o uso dessa abordagem, a menos que você queira aprender XPath, mas estou mencionando isso caso o Google adicione opções de distinção entre maiúsculas e minúsculas no futuro... talvez... eventualmente... algum dia, espero.

  • Outra vantagem dessa abordagem é que você pode ir diretamente para os resultados da pesquisa na guia original do navegador da web apenas clicando duas vezes no nó do elemento que contém o texto desejado. Isso não é possível com as abordagens de pesquisa de texto fonte mencionadas acima.

Comparação:

Opção que diferencia maiúsculas de minúsculas Palavra inteira Modo Regex Modo XPath Compatível com SPA
Ctrl+F na página da web Não Não Não Não Sim
Ver código-fonte> Ctrl + F Não Não Não Não Não
Ferramentas de desenvolvimento > Pesquisa Sim Não Sim Não Não
Ferramentas de desenvolvimento > Elementos > Ctrl+F Somente com XPath Não Não Sim Sim
Ferramentas de desenvolvimento > Fontes > Ctrl+F Sim Não Sim Não Não

Responder3

Aqui está uma função que solicita uma palavra e realiza uma pesquisa com distinção entre maiúsculas e minúsculas:

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++;
})();

Ele pode ser salvo como um bookmarklet para fácil acesso.

Referências

Bookmarklet de pesquisa de expressão regular

Destaque o marcador Regex

Responder4

Você pode usarLocalizar e substituir para edição de textoouencontrar+ | Ferramenta Localizar na página Regex,GitHubouEncontrarRextensões para pesquisa com distinção entre maiúsculas e minúsculas no Chrome.

Isso pode ser facilmente aberto por qualquer atalho de teclado de sua preferência. Além disso, você pode fazer RegEx, pesquisa de palavras inteiras, localizar e substituir texto também, etc.

informação relacionada