0

I'm trying to execute a Regex text replace on all the React files of an application in VS Studio Code.

Inside my files I've nominated CSS classes using the standard:

<div className='random_class_name'></div>

Now I'm moving to CSS Modules so I need to replace the apostrophes on all div tags with a graph parenthesis plus a prepend variable to obtain:

<div className={styles.random_class_name}></div>

Searching around I can just find ideas on how to replace strings between the tags but I need to keep the class name. I've tried to use a positive lookbehind on className= and select the first two apostrophes after but it didn't work out.

Tom
  • 21
  • 4
  • You need to update the question and provide a [mcve]. Show what you have tried. In the tags, add the language this regex will be used in. Ex. bash or Python or ... – Nic3500 Jun 30 '19 at 04:05
  • @Nic3500 Thank you for the suggestion but it's a simple text replace operation where I have a source and a target in this case and can be reproduced on any language/tool. I've added extra info such as why I was doing this operation to give some context. As stated, the text replace is executed inside Visual Studio Code using the software regex search and replace, otherwise I would have added the language. – Tom Jun 30 '19 at 10:31

1 Answers1

0

My guess is that we can likely start with an expression similar to:

<(.+?)className='\s*(.+?)\s*'>

with a replacement of:

<$1className={styles.$2}>

which might be one option.

Demo

Community
  • 1
  • 1
Emma
  • 1
  • 9
  • 28
  • 53