☰

Google Chrome での大文字と小文字を区別した検索

tag-icon • tag-icon google-chrome
Google Chrome での大文字と小文字を区別した検索

Google Chrome でページ検索時に大文字と小文字を区別する方法はありますか?

ブラウザのスクリーンショット

たとえば、「Tree」を検索していて、探しているケースに一致しない「tree」や「TREE」などのすべてのバリエーションを除外したいとします。これは可能ですか?

答え1

TL;DR（2022年2月現在）：

まだ、 しかし最終的に。

2022 年現在、大文字と小文字を区別するページ内検索機能は 2018 年から Chrome に存在していますが、Google はまだこの機能を UI に公開していません。

タイムライン

答え2

の開発者ツールChromiumベースのブラウザ（Chrome、Edge、Opera、その他) は大文字と小文字を区別した検索 (および正規表現も) をサポートしています。

現在のブラウザタブの開発者ツールを開くには:

  • Windows の場合は、F12一度押すだけです。
  • Windows以外のプラットフォームの場合、またはが利用できない場合は、 ++をF12使用できます（これはCtrlShiftI
    大文字-目、ではなく小文字のエル）

Chrome 97（2022 年 2 月）以降、開発者ツールを使用して現在のドキュメントを 3 つの方法で検索できます。

1: 「検索」パネルを使用する

ここに画像の説明を入力してください

  • (この機能は、「すべてのファイルで検索」と名付けた方がよいと思います)。
  • まず、開発者ツールウィンドウ（F12またはCtrl++ ）を開きますShift。I
  • 次に、開発者ツール ウィンドウ内から、それを開くには 2 つの方法があります。
    1. 方法1: 任意のタブで、Escapeキーを押してコンソールドロワーを開き、3つのドットをクリックしてその他のツールメニューから「検索」を選択します。
    2. 方法2: 右上のメニューをクリックし、その他のツールをクリックし、「検索」を選択します。
  • 開いたら、検索テキストボックスの周囲にあるボタンを使用して、大文字と小文字の区別と正規表現モードを切り替えます。
  • ただし、このアプローチには欠点もあります。
    • このツールは、生のテキストソースを検索しますすべてのファイル現在のページで使用されているすべてのファイル（他の HTML ファイル、JavaScript.jsソース、CSS.cssスタイル テキストなど）を検索する必要があるため、「var」や「title」などの用語を検索すると、無関係な結果が多数表示されます。
      • 幸い、結果はファイルごとにグループ化されているので、HTML 以外の検索結果を頭の中で除外するだけです。
    • 検索結果は、現在のDOMのHTML表現ではなく、HTMLファイルまたはJSファイルの元のソースに一致するため、このアプローチはいわゆるシングルページアプリケーション(SPA) ソース HTML は単なるスタブ ローダーであり、現在のページのテキスト コンテンツは含まれません。
      • 検索はライブDOMではなくテキストソース上で実行されるため、検索結果をダブルクリックしてもブラウザのメインウィンドウが選択された要素にジャンプすることはできません。代わりに、結果をダブルクリックすると、開発者ツールの出典[要素] タブの代わりに [OK] タブを使用します。

2: HTMLソース検索:

ここに画像の説明を入力してください

  • Chrome の「ソースを表示...」機能では、Ctrl+を使用しFて元の生の HTML ソースを検索できますが、私たちが求めている大文字と小文字を区別する検索オプションや正規表現検索オプションはまだありません。
    • ただし、開発者ツールウィンドウの出典ペインには独自のCtrl+F検索機能があり、する大文字と小文字の区別と正規表現モードをサポートします。
  • 検索パネルと同様に、これは現在のライブDOM ツリーなので、このアプローチは、SPA など、元の HTML が [要素] タブに表示されるライブ DOM から大きく離れている Web ページでは機能しません。

3: ライブ DOM 検索 (大文字と小文字を区別する XPath を使用):

Live DOM 検索では、大文字と小文字を区別しないテキスト検索のみがサポートされます...

ここに画像の説明を入力してください

...ただし、大文字と小文字を区別する XPath クエリもサポートしています。

ここに画像の説明を入力してください

  • の中に要素Tab キーを押しながらCtrl+を押しますF。これにより、ドキュメントの DOM のテキスト全体 (HTML 属性を含む) の検索を実行できます。

  • これはライブ DOM を検索するため、SPA Web ページやその他のスクリプトを多用したページで機能します。

  • 検索ボックスには 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')](上記のスクリーンショットのように) を使用してみてください。
      • $x()期待した結果が得られない場合は、開発者ツール コンソールに組み込まれている関数を使用して XPath クエリをテストできます$x("//*[contains(text(),'Developer Tools')]")(上記のスクリーンショットのとおり)。

  • しかし、Chrome 97以降では大文字と小文字の区別や正規表現はまだサポートされていませんテキスト検索の場合、XPath を学習する場合を除き、このアプローチを使用する意味がほとんどなくなりますが、Google が将来大文字と小文字を区別するオプションを追加した場合に備えて言及しています...おそらく...最終的には...いつか、そうなることを願っています。

  • この方法のもう 1 つの利点は、必要なテキストを含む要素ノードをダブルクリックするだけで、元の Web ブラウザー タブの検索結果に直接ジャンプできることです。これは、前述のソース テキスト検索方法では不可能です。

比較：

大文字と小文字を区別するオプション 単語全体 正規表現モード 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++;
})();

簡単にアクセスできるようにブックマークレットとして保存できます。

参考文献

正規表現検索ブックマークレット

ハイライト正規表現ブックマークレット

答え4

使用できますテキスト編集のための検索と置換またはfind+ | 正規表現ページ内検索ツール、ギットハブまたは検索RChrome で大文字と小文字を区別して検索するための拡張機能。

これは、お好みのキーボード ショートカットで簡単に開くことができます。また、正規表現、単語全体の検索、テキストの検索と置換なども実行できます。

関連情報