☰

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 中公开该功能。

时间线

  • 自 2011 年 4 月 6 日起，功能要求与 Chromium（Chrome 的开源代码库）拒绝：

    2011-04-06：jeff****@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
    大写-眼睛，不是小写字母）

从 Chrome 97（2022 年 2 月）开始，你可以使用开发人员工具以 3 种不同的方式搜索当前文档：

1：使用“搜索”窗格

在此处输入图片描述

  • （我认为，这个功能最好命名为“在所有文件中搜索”）。
  • 首先，打开开发者工具窗口（F12或Ctrl++ Shift）I
  • 然后，从开发人员工具窗口内部，有两种方法可以打开它：
    1. 方法 1：在任何选项卡中，按下Escape键打开控制台抽屉，然后单击三个点打开更多工具菜单，然后选择“搜索”：
    2. 方法 2：点击右上角菜单，选择更多工具，然后选择“搜索”：
  • 打开后，使用搜索文本框周围的按钮切换区分大小写和正则表达式模式。
  • 但是使用这种方法也有缺点：
    • 此工具搜索全部文件由于当前页面所使用的 JavaScript 属性和方法都与当前页面所使用的 JavaScript 属性相关，包括其他 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 查询：

在此处输入图片描述

  • 在里面元素tab，按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

您可以使用查找和替换文本编辑或者find+ | 正则表达式页面查找工具，Github或者查找R用于 Chrome 中区分大小写的搜索的扩展。

您可以使用任何您喜欢的键盘快捷键轻松打开它。您还可以执行 RegEx、全词搜索、查找和替换文本等。

相关内容