Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.
Since CodePen is a web page in a web browser, you can use the browser’s search command to find text on any page. This works in the Editor too, and will find code, but it won’t always find all the matches for a bit of code. That’s because CodeMirror does a special thing where not all of your code is always rendered in the DOM at all times. It’s a great feature, because it helps with performance quite a bit, especially on Pens with loads of code.
So rather than rely on browser’s native search feature, we’ve implemented CodeMirror’s search functionality.
When you have a particular editor in focus, the search keyboard command (Command-F on Mac, Control-F on PC) is overridden to use the new search. Here’s how that works:
This will search that entire editor for instances of your search term (non case sensitive). We’ve had a number of people be confused why browser search wasn’t working for them, so we hope this is an enjoyable improvement!
There is a Find/Replace functionality as well now (Command-Option-F on Mac, Control-Shift-F on PC). First type in what to find and hit Enter. Then what the replacement string should be. Then you’ll have an opportunity to yes/no each find. Here’s how that works:
In case you’re some kind of genius, the search field accepts RegEx syntax as well. So you don’t have to find exact matches only, you can find things based on patterns.
For instance you could run this search in HTML:
and it will find any
<strong> tag with a matching
</strong> tag and select them both and all text inside.