Regex Find & Multiple Cursors

[00:00:00]
>> Burke Holland: Another concept that's become very popular in editors over the past few years is the concept of multiple cursors. Now, multiple cursors are very powerful, but a lot of people have trouble understanding when I should actually use one. It's kind of like artificial intelligence. Like it's a cool technology, but when do I actually use it?

[00:00:18]
And so what I wanna show you is some cases in which you would use multiple cursors. Once you understand how to use them, you'll start to find places to use them. So for instance here in this file, I'm gonna decrease the font size here so we can get more text on the screen.

[00:00:32]
I hope everybody can see that still. If I put my cursor on colorInput, notice that DS code is highlighting other instances of colorInput here. So let's say that we wanted to rename this or change this value, this colorInput value to something else. What I can do is highlight it.

[00:00:52]
And now you can see it's highlighted, and you can't see it on the projector but it's highlighted the colorInput. It's highlighted the colorInput in document, getElementById. And it's highlighted the colorInput that is down below in the goButton.addEventListener method. I can add a cursor to every single one of these instances with Command > Shift > L.

[00:01:13]
I now have a cursor on all of these instances, and I can hit backspace, and then I can type lampColor. And I have changed all three of those instances at one time. Now, if you're paying close attention though, you'd notice that what I just did would break the application.

[00:01:36]
One of these things is a variable name, and the other one is a reference to an element in the HTML. So what we really wanna do here is we wanna change two of them, but not one of them. So we wanna change the first one, we wanna leave the second one the same, and we wanna change the third one.

[00:01:57]
You can use Command > D to add one cursor at a time. So if I come here and select this and say Command > D, it puts a cursor there. Command > D again, and we get a cursor down below, and I hit the arrow key there so we lost it.

[00:02:14]
D > D, now we have three cursors. What we want to do though, is we want to skip this second instance. So what we're gonna do is hit Command > D, and then we're gonna say Command > K, still holding down the Command key, Command > D again.

[00:02:30]
And that skips that instance with the multiple cursors. You'll use this a lot. You need to know how to skip with multiple cursors. And now we can safely say, this is lampColor and we've only got the two values that we're looking for.
>> Burke Holland: So that's skipping instances. I'm gonna change this back, and let's talk about finding things.

[00:02:56]
Of course, you have find and replace, most people are familiar with this idea. In our index.html file here, we can find anything with just Command, or Ctrl > F. If you do Command > Shift > F, that actually opens the project-wide find and replace.
>> Burke Holland: Here, up in the Find though, I wanna show you something that you can do with Find that's a little more powerful.

[00:03:27]
So in our application here, let's say just for the sake of demonstration, that we're looking for all of the images in this file. We can do that with the Find box. And we do that by using a regular expression. That's what this little toggle here is. If I turn this on, we're now looking for regular expression.

[00:03:51]
If we said something like input, it's gonna find all the inputs. Now, you don't need to know regular expressions to make this work, you just need to know a basic amount. So for instance, we have two images in this page, and if we go over to the application they're broken, right?

[00:04:13]
The header image is broken and the background image is broken. And they're broken because they've been moved over here in our start folder, and now in an images folder. But you can see the path here is not correct. So what we wanna do is we wanna update both of the paths on these items.

[00:04:34]
We can find all of the images in this document just by saying, I wanna find any jpeg, and I wanna find any png, and any gif. So that or right there allows you to find multiple different strings using a regular expression. So if we scroll down, you'll see we've got background, and we've also got logo.png right there.

[00:05:03]
Now at this point what we want to do, if we've got both of these things on the screen is, we want to change them both, okay? Now, you might be tempted to change one and then change the other, you found one and then found the other. You don't need to do that, you can change them both at the same time.

[00:05:19]
So what you're gonna do here, is you're gonna press Option or Alt > Enter, and that is gonna add a cursor to both of those instances at the same time. And then we can use Option or Alt and the arrow key, and move to the front of the word, move to the front of the period, move to the front of the next word.

[00:05:39]
We're now at the very front, and all we have to do is type images/ and we've updated both instances of images at the same time. Multiple cursors are so cool, you just have to know when to use them. So just to repeat that again, when you're in the Find, Option or Alt > Enter, will add a cursor instance to every found instance in the document, it's a very powerful feature.

[00:06:06]
One other thing I wanna show you about Find and Replace. So I think here Replace is, Option > Shift > F. So if you do Command > Option or Control > Alt > F, then you get to Find and Replace box. Now, a lot of times what we'll do here is we'll say, I want to find this or actually let's find something else, say we wanna find container.

[00:06:33]
So we'll say I wanna find container, and I wanna replace it with section or something like that. And then you hit Enter and it will replace, just a quick tip. If you do this instead of typing in there, you can just highlight something. So let's say we wanna find columns, and then we'll do Command > Option > F, and columns is prefilled in the Find.

[00:06:56]
So whatever is on the clipboard before you open Find is what gets put in the Find. So just faster instead of typing it, just copy it and then open the Find and Replace, and it will make you a little bit more productive, and everybody will be impressed. And that's the most important thing in life, is it not?

[00:07:14]
All right? It isn't, that's the truth.