☰

Google Chrome 中區分大小寫的搜尋

tag-icon • tag-icon google-chrome
Google Chrome 中區分大小寫的搜尋

有沒有辦法在 Google Chrome 中執行區分大小寫的頁面搜尋？

瀏覽器截圖

假設我正在搜尋“Tree”，並且我想排除與我正在尋找的情況不匹配的所有變體，例如“tree”或“TREE”。這可能嗎？

答案1

TL;DR（截至 2022 年 2 月）：

還沒有， 但最終。

截至 2022 年，Chrome 自 2018 年起就已存在區分大小寫的頁面查找功能，但 Google 尚未在 UI 中公開該功能。

時間軸

  • 截至 2011 年 4 月 6 日，本功能要求與 Chromium（Chrome 的開源程式碼庫）一起拒絕:

    2011-04-06：傑夫****@google.com

    與 UI 線索進行討論：如果有的話那就太好了，但我們目前不願意將選項新增到 UI。

  • 2017年該問題已作為問題 687552 重新開放，截至 2022 年第一季度，此問題仍懸而未決。

  • 2018 年，底層 Blink 引擎添加了區分大小寫的頁面查找支持（以及其他選項，例如“匹配整個單字”）。但Chrome自己的UI仍然沒有公開這個功能。

  • 截至 2022 年 1 月 31 日，我們仍在等待 Google 指派 UI/UX 團隊來設計和實作「在頁面中尋找」彈出框的變更以支援這些選項。

答案2

這開發者工具基於 Chromium 的瀏覽器（Chrome、Edge、Opera、等等) 支援區分大小寫的搜尋（也支援正規表示式！）：

若要開啟目前瀏覽器標籤的開發人員工具：

  • 在 Windows 上，只需按F12一下。
  • 對於非Windows平台，或者如果F12不可用，您可以使用++ Ctrl（這是一個ShiftI
    大寫-眼睛，不是一個小寫-ell）

從 Chrome 97（2022 年 2 月）開始，您可以透過 3 種不同的方式使用開發人員工具搜尋目前文件：

1：使用「搜尋」窗格

在此輸入影像描述

  • （在我看來，此功能最好稱為“在所有文件中搜尋”）。
  • 首先，開啟開發者工具視窗（F12或Ctrl++ Shift）I
  • 然後，在「開發人員工具」視窗中，有兩種​​方法可以開啟它：
    1. 方法一：在任何標籤中，Escape按鍵打開控制台抽屜，然後按三個點以打開控制台抽屜。更多工具選單，然後選擇“搜尋”：
    2. 方法2：點選右上角選單，選擇更多工具，然後選擇“搜尋”：
  • 開啟後，使用搜尋文字方塊周圍的按鈕來切換區分大小寫和正規表示式模式。
  • 但使用這種方法也有缺點：
    • 該工具搜尋原始文字來源全部文件目前頁面使用的，包括其他 HTML 檔案、JavaScript.js原始程式碼、CSS.css樣式文字等），因此搜尋「var」或「title」等術語將產生大量不相關的結果。
      • 幸運的是，結果是按文件分組的，因此只需在心裡過濾掉非 HTML 搜尋結果即可。
    • 搜尋結果將匹配 HTML 檔案或 JS 檔案的原始來源，而不是目前 DOM 的 HTML 表示，因此這種方法對於搜尋所謂的單頁應用程式（SPA），因為來源 HTML 只是一個存根載入器，不會包含目前頁面的文字內容。
      • 由於搜尋是透過文字來源而不是即時 DOM 執行的，這也意味著您無法雙擊搜尋結果以使瀏覽器的主視窗跳到所選元素。相反，雙擊結果將顯示開發人員工具中的內容來源選項卡而不是元素選項卡。

2：HTML原始碼搜尋：

在此輸入影像描述

  • 雖然 Chrome 的「檢視原始碼...」功能確實允許您使用Ctrl+F來搜尋原始 HTML 原始碼，但它仍然缺少我們所追求的區分大小寫和正規表示式搜尋選項。
    • 但是，開發人員工具視窗的來源窗格有自己獨立的Ctrl+F搜尋功能做支援區分大小寫和正規表示式模式。
  • 與搜尋窗格一樣，這不會搜尋目前的居住DOM 樹，因此此方法不適用於原始 HTML 與「元素」標籤中顯示的即時 DOM 相去甚遠的網頁（例如 SPA）。

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')]（如上面的螢幕截圖所示）。
      • 如果您沒有得到預期的結果，您可以使用$x()開發人員工具控制台內建的函數來測試 XPath 查詢，例如$x("//*[contains(text(),'Developer Tools')]")（也如上面的螢幕截圖所示）。

  • 但是，從 Chrome 97 開始它仍然不支援區分大小寫或正規表示式對於文字搜索，這在很大程度上完全違背了使用這種方法的意義，除非您想學習XPath，但我提到它是為了防止Google 將來確實添加區分大小寫的選項...也許...最終...我希望有一天。

  • 這種方法的另一個優點是，您只需雙擊包含所需文字的元素節點，就可以直接跳到原始 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

您可以使用文字編輯的尋找和替換或者尋找+ |正規表示式頁內查找工具,吉圖布或者尋找RChrome 中區分大小寫搜尋的擴充功能。

這可以透過您喜歡的任何鍵盤快捷鍵輕鬆打開。您也可以進行正規表示式、全字搜尋、尋找和取代文字等。

相關內容