WebStorm Find and Replace: Complete Guide

Introduction to WebStorm Find and Replace

WebStorm, JetBrains' powerful IDE for JavaScript and TypeScript development, ships with one of the most sophisticated find and replace systems available in any code editor. Whether you are renaming a variable across a large monorepo, refactoring a deprecated API, or hunting down a subtle bug hidden in thousands of lines of code, mastering WebStorm's find and replace features will dramatically improve your productivity.

This guide walks through every major capability of the Find and Replace toolset, from the simplest text search to advanced structural replace, regex patterns, scopes, and project-wide refactoring. By the end, you will understand not only which shortcuts to press, but also which strategy to apply for each scenario.

Why Find and Replace Matters

At first glance, find and replace seems trivial — every text editor can do it. But in a real codebase, the difference between a naive string replacement and a context-aware replacement is enormous. Consider the following risks:

• False positives: Replacing the word "user" might corrupt comments, strings, or unrelated identifiers.
• Missed occurrences: Variations in casing, whitespace, or formatting can hide matches from a simple search.
• Broken syntax: A blind replacement can leave dangling commas, mismatched brackets, or invalid identifiers.
• Scope creep: Replacing across node_modules or build artifacts can introduce unpredictable behavior.

WebStorm mitigates all of these risks by offering scoped searches, structural awareness, regex support, file filters, and a preview-driven replacement workflow. Using these features correctly means you can perform large-scale changes confidently and reversibly.

Core Find and Replace Shortcuts

Before diving into features, memorize these essential shortcuts. They are the foundation of everything that follows.

• Cmd/Ctrl + F — Find in current file
• Cmd/Ctrl + R — Replace in current file
• Cmd/Ctrl + Shift + F — Find in path (project-wide)
• Cmd/Ctrl + Shift + R — Replace in path (project-wide)
• Cmd/Ctrl + Shift + A — Find Action (search for any IDE command)
• F3 / Shift + F3 — Navigate to next / previous occurrence
• Cmd/Ctrl + Shift + F7 — Highlight usages in current file

Find and Replace in a Single File

The single-file search is the most common operation. Press Cmd/Ctrl + F to open the search bar at the top of the editor. Type your query, and WebStorm highlights all matches in the file and shows a count in the search bar.

To replace, press Cmd/Ctrl + R. The search bar expands to include a replacement field. You can step through matches one at a time using the Replace button, or apply all changes at once with Replace All.

Search Options

Next to the search field, several toggle buttons refine your query:

• Match case (Aa): Distinguishes uppercase from lowercase.
• Words (\b): Matches whole words only, preventing partial matches inside longer identifiers.
• Regex (.*): Treats the search string as a regular expression.
• In selection: Limits the search to the currently selected text.

These toggles can be combined. For example, enabling both Match case and Words ensures that searching for fetch matches the function call but not fetchData or prefetch.

Find and Replace in Path (Project-Wide)

For changes that span multiple files, use Find in Path (Cmd/Ctrl + Shift + F) and Replace in Path (Cmd/Ctrl + Shift + R). This opens a dedicated tool window with far more options than the single-file bar.

Scope Selection

The Scope dropdown lets you choose where WebStorm searches:

• In Project: The entire project, respecting excluded folders.
• Module: A specific module, useful in monorepos.
• Directory: A chosen folder and its children.
• Scope: Custom scopes you define, such as "Production Files" or "Test Files".

File Mask

The File mask field restricts results to specific file types or patterns. You can use comma-separated extensions or glob-like patterns:

*.ts, *.tsx
*.js
*.css
webpack.config.*

This is invaluable when you want to rename a CSS class only in stylesheets, or update an import path only in TypeScript files.

Preview Before Replacing

When you perform a Replace in Path, WebStorm opens a preview window showing every match with the proposed replacement. You can deselect individual occurrences before committing. This safety net is critical for large refactors — always review the preview before clicking Replace All.

Regular Expressions in Find and Replace

WebStorm uses the standard JavaScript regex engine. Enable the regex toggle (the .* icon) to unlock pattern-based searching. The replacement field supports capture groups referenced with $1, $2, and so on.

Example 1: Convert var to const

Suppose you want to replace var declarations with const across a legacy codebase.

Search:    var (\w+) = 
Replace:   const $1 = 

This matches var myVar = and replaces it with const myVar = , preserving the variable name.

Example 2: Swap Function Syntax

Convert old-style function expressions assigned to variables into arrow functions.

Search:    var (\w+) = function\(([^)]*)\) \{
Replace:   const $1 = ($2) => {

Given input like:

var handleClick = function(event) {
  console.log(event);
};

The result becomes:

const handleClick = (event) => {
  console.log(event);
};

Example 3: Extract and Reformat Strings

Convert single-quoted strings to double-quoted strings while preserving the content.

Search:    '([^']*)'
Replace:   "$1"

Regex Cheat Sheet for Common Tasks

• \b — Word boundary
• \s+ — One or more whitespace characters
• \d+ — One or more digits
• [^)]+ — Everything up to a closing parenthesis
• (?:...) — Non-capturing group
• (?i) — Case-insensitive flag (inline)

Search Templates and Recent History

WebStorm remembers your recent searches. Click the history dropdown (or press Cmd/Ctrl + Up while focused in the search field) to cycle through previous queries. This is handy when you are iterating on a complex regex and want to tweak it without retyping.

You can also save frequently used searches as live templates or scope definitions, making repetitive audit tasks faster.

Structural Search and Replace

Beyond text and regex, WebStorm offers Structural Search and Replace (SSR), which understands the syntax tree of your code. This means you can search for "any arrow function that returns a Promise" or "any JSX element with a className prop" without writing fragile regex.

Access SSR via Edit > Find > Search Structurally and Edit > Find > Replace Structurally.

Example: Find All Console Log Calls

Use the following template to match every console.log invocation, regardless of arguments:

console.log($args$)

The $args$ variable captures any number of arguments. You can then replace them all with a no-op or a custom logger:

logger.debug($args$)

Example: Find React Components Without PropTypes

SSR can express constraints that regex cannot. For instance, you can search for function components that lack a PropTypes declaration, helping enforce team conventions during code review.

While SSR has a learning curve, it pays off in large codebases where textual searches produce too many false positives.

Find Usages and Rename Refactoring

For symbol-level changes, Find Usages (Alt + F7) and Rename (Shift + F6) are safer than text-based replace. These operations are semantic — they understand scope, imports, and language rules.

• Find Usages: Lists every reference to a variable, function, class, or component across the project.
• Rename: Safely renames a symbol everywhere it is used, including in string literals and comments if you choose.

Prefer Rename over Replace in Path whenever you are changing an identifier. Reserve Replace in Path for textual changes like documentation, configuration values, or non-code files.

Best Practices

1. Always Preview Project-Wide Replacements

Never click Replace All without scanning the preview window. Even with careful regex, edge cases lurk in comments, strings, and test fixtures.

2. Commit Before Refactoring

Before a large find-and-replace operation, commit your working tree. If the replacement goes wrong, you can revert instantly with git checkout rather than undoing hundreds of edits manually.

3. Use Scopes to Narrow Results

Define custom scopes for source files, test files, and configuration. This prevents accidental edits to generated code or third-party dependencies.

4. Combine File Masks with Regex

For precise control, combine a file mask (e.g., *.test.ts) with a regex pattern. This targets exactly the files and patterns you intend to change.

5. Prefer Semantic Refactors for Code

Use Rename, Change Signature, and Extract Variable instead of textual replace whenever possible. Semantic refactors respect language rules and produce compilable results.

6. Leverage Excluded Folders

Mark node_modules, dist, and build as excluded in Project Structure settings. Excluded folders are skipped by Find in Path, keeping results relevant and fast.

7. Save Complex Regex for Reuse

If you regularly run the same audit (for example, finding deprecated API calls), store the regex in a shared document or a live template so the whole team benefits.

Conclusion

WebStorm's Find and Replace system is far more than a simple text tool. By combining single-file search, project-wide Find in Path, regex with capture groups, file masks, custom scopes, and structural search, you can perform precise, safe, and reversible changes across codebases of any size. The key is to match the tool to the task: use single-file replace for quick edits, regex for pattern-based transformations, semantic refactors for symbol renames, and structural search for syntax-aware queries. With these techniques in your workflow, even the largest refactors become manageable, predictable, and far less error-prone.