Case sensitive searches in Google Chrome

Question

Is there a way to perform case sensitive on page searches in Google Chrome?

Say I'm searching for "Tree" and I want to exclude all variants such as "tree" or "TREE" which don't match the case I'm looking for. Is this possible?

Answer 1

TL;DR (as of February 2022):

Not yet, but eventually.

As of 2022, case-sensitive find-in-page functionality has existed in Chrome since 2018, but Google still hasn't exposed the functionality in the UI yet.

Timeline

• As of 6th April 2011, this feature request with Chromium (the open source code base of Chrome) has been rejected:

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

  Discussed w/ UI leads: This would be nice to have, but we're not willing to add the options to the UI at this time.

• In 2017 the issue was reopened as issue 687552, and as-of Q1 2022 this issue still remains open.

• In 2018 case-sensitive find-in-page support was added to the underlying Blink engine (along with other options like "match whole word"). But this functionality is still not exposed by Chrome's own UI.

• As of 31st January 2022, we're still waiting for Google to assign a UI/UX team to design and implement the changes to the Find-in-page popup box to support these options.

Answer 2

The Developer Tools window in Chromium-based browsers (Chrome, Edge, Opera, et cetera) supports case sensitive search (and regular-expressions too!):

To open the Developer Tools for the current browser tab:

• On Windows, just press F12 once.
• For non-Windows platforms, or if F12 is unavailable, you can use Ctrl+Shift+I
  _{(That's an uppercase-eye, not a lowercase-ell)}

As of Chrome 97 (Februrary 2022), you can search the current document using Developer Tools in 3 different ways:

1: Use the "Search" pane

• (This feature would be better-named as "Search in all files", imo).
• First, open the Developer Tools window (F12 or Ctrl+Shift+I)
• Then, from within the Developer Tools window, there are 2 ways to open it:
  1. Method 1: In any tab, press the Escape key to open the Console drawer, then click on the three dots to open the More Tools menu, then choose "Search":
     
  2. Method 2: Click on the top-right-corner menu, choose More Tools, and choose "Search":
     
• Once opened, use the buttons around the search textbox to toggle case-sensitivity and regular-expression mode.
• There are downsides to using this approach though:
  • This tool searches the raw text source of all files used by the current page, including other HTML files, JavaScript .js source, CSS .css styles text, et cetera), so searching for a term like "var" or "title" will yield a lot of irrelevant results.
    • Fortunately results are grouped by file, so just mentally filter-out non-HTML search results.
  • Search results will match the original source of a HTML file or JS file instead of the current DOM's HTML representation, so this approach is not useful for searching so-called single-page applications (SPAs) as the source HTML is just a stub loader and will not contain the current page's textual content.
    • Because searches are performed over text source rather than the live DOM it means also that you cannot double-click a search result to make the browser's main window jump to the selected element. Instead double-clicking a result will show you the content in the Developer Tool's Sources tab instead of the Elements tab.

2: HTML Source search:

• While Chrome's "View source..." feature does allow you to use Ctrl+F to search the original raw HTML source, it still lacks the case-sensitive and regular-expression search options that we're after.
  • However, the Developer Tools window's Sources pane has its own separate Ctrl+F search feature which does support case-sensitivity and regex modes.
• As with the Search-pane, this does not search the current live DOM tree, so this approach will not work for web-pages where the original HTML is far removed from the live DOM as displayed in the Elements tab, such as SPAs.

3: Live DOM Search (with case-sensitive XPath):

The Live DOM search supports only case-insensitive text searches...

...but it also supports case-sensitive XPath queries:

• In the Elements tab, press Ctrl+F. This lets you perform a search of the document's entire DOM's text (including HTML attributes).

• As this searches the live DOM, it works with SPA web-pages and other script-heavy pages.

• The search box has 3 modes:

  1. Text search (this is case-insensitive only, unfortunately)
  2. CSS Selector search (supports case-sensitive and case-insensitive selectors but only for HTML element names and attributes: you cannot use a CSS selector to match DOM text).
     • To perform a case-sensitive HTML attribute search, use elementName[attributeName="value"s].
     • To perform a case-insensitive HTML attribute search, use elementName[attributeName="value"i].
  3. XPath mode (which supports case-sensitive searches).
     • XPath queries are case-sensitive, and you can use some XPath functions to perform case-insensitive searches.
     • You can use any XPath query. For example, try using //*[contains(text(),'Developer Tools')] (as per the screenshot above).
     • If you don't get the results you expect, you can test the XPath query with the $x() function built-in to the Developer Tools console, e.g. $x("//*[contains(text(),'Developer Tools')]") (as per the screenshot above too).

• However, as of Chrome 97 it still doesn't support case-sensitivity or regular-expressions for text searches, which largely defeats the point of using this approach entirely unless you want to learn XPath, but I'm mentioning it in-case Google does add case-sensitivity options in future... maybe... eventually... some-day, I hope.

• Another advantage of this approach is you can directly jump to the search results in your original web browser-tab just by double-clicking the element node that contains the text you want. This isn't possible with the aforementioned source text search approaches.

Comparison:

	Case-sensitive option	Whole word	Regex mode	XPath mode	SPA-compatible
Ctrl+F in web-page	No	No	No	No	Yes
View Source > Ctrl+F	No	No	No	No	No
Dev Tools > Search	Yes	No	Yes	No	No
Dev Tools > Elements > Ctrl+F	Only with XPath	No	No	Yes	Yes
Dev Tools > Sources > Ctrl+F	Yes	No	Yes	No	No

Answer 3

Here's a function which prompts for a word and performs a case-sensitive search:

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

It can be saved as a bookmarklet for easy access.

References

Regular Expression Search Bookmarklet

Highlight Regex Bookmarklet

Answer 4

There is also a nice plugin for that: QuickFind

Answer 5

You can use Find & Replace for Text Editing or find+ | Regex Find-in-Page Tool,Github or FindR extensions for case sensitive search in chrome.

This can easily opened by any keyboard shortcut you prefer. Also you can do RegEx, whole word search, find and replace text too etc. etc. too.

Answer 6

Indian blogger Amit Agrawal has created a bookmarklet for this function which can do this easily.

http://www.labnol.org/internet/case-sensitive-find/28186/