Regex in VSCode: case conversion in replace, modifiers \l, \L, \U, \u not working

Question

I'm trying to replace a structure like this:

testVars.bread.componentFlour
testVars.bread.componentWater

to something like this:

testVars.dough.flour
testVars.dough.water

this happens with multiple variable names; I want to remove the component and have the first letter converted to lowercase to match CamelCase.

What I tried doing was matching testVars.bread.component(.) replacing it with testVars.dough.\l$1.

According to regex documentation, that should convert my match to lowercase. However, VSCode wants to insert \l as text.

How do I get VSCode to convert my match to lowercase?

EDIT: To clarify, this is strictly for VSCode's implementation, not a regex question itself. Matching this group in notepad++ and replacing with testVars.dough.\l\1 does exactly what I want it to do.

Answer 1

NEW ANSWER: !! Those case modifiers like \l and \u are being added to the find/replace functionality in vscode (both in find within one file and search across multiple files [v1.49] - see https://github.com/microsoft/vscode/pull/105101) (see https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_47.md#case-changing-in-regex-replace) - will be in v1.47 (find) and v1.49 (search across files).

So that your original thought to

Find : testVars.bread.component(.)

Replace : testVars.dough.\l$1

is now working.

For more on how the case modifiers work in vscode, see https://stackoverflow.com/a/62270300/836330

---

OLD ANSWER:

While you cannot replace with a lowercase identifier in vscode, you still have some of options.

1. Use a regex like (?<=testVars\.).*\.component(.*) so that testVars. is not captured - because you do not want to change its case.

2. Ctrl+Shift+L to select all your matches (same aseditor.action.selectHighlights).

3. Ctrl+Shift+P, type lowerand trigger that command (or make a keybinding for this unbound command).

4. Trigger your replaceAll

---

To speed that up you have two options. (1) Make a macro that would run steps 2, 3 and 4. Or (2) make a snippet that will transform your selections - effectively running steps 3 and 4 at once.

Snippet in your keybindings.json (not in a snippets file):

{ 
  "key": "alt+m",                          // choose some keybinding
  "command":  "editor.action.insertSnippet",
  "args": {
    "snippet": "${TM_SELECTED_TEXT/.*\\.component(.*)/dough.${1:/downcase}/}"
  },
},

and then Ctrl+Shift+L to select all, and alt+m to trigger the above insertSnippet.

---

Macro approach:

Using some macro extension, here multi-command, put this into your settings.json:

"multiCommand.commands": [

  {
    "command": "multiCommand.findReplaceLowercase",
    "sequence": [
      "editor.action.selectHighlights", {
        "command": "editor.action.insertSnippet",
        "args": {
          "name": "replace and lowercase",
        }
      },
    ]
  }
]

and a snippet, in one of your snippets files:

"replace and lowercase": {   // this "label" is used in the macro
  "prefix": "for",
  "body": [
  
      "${TM_SELECTED_TEXT/.*\\.component(.*)/dough.${1:/downcase}/}"
    
      // "${TM_SELECTED_TEXT/(.*)/${1:/downcase}/}"  // to downcase all selected text
    
  ],
  "description": "replace selected text"
},

and a keybinding to trigger the macro:

{ 
  "key": "alt+m",        // choose some keybinding
  "command": "extension.multiCommand.execute",
  "args": { "command": "multiCommand.findReplaceLowercase" },
}

---

In the demo I copy the find regex into the find widget (or just write it there, it doesn't matter how it gets there or where focus is) and then hit alt+m (the macro keybinding) and that is it.

Obviously, this looks like a lot of work but you could keep reusing the macro and snippet, transforming to the replace result you would like the next time. And there you can use /downcase, /upcase, /capitalize and /pascalcase all you want which you can't use in the replace field of the find/search widgets.