Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

Replace Repeated Characters with JavaScript

By David Walsh on August 10, 2018

URLs can be tricky to work with because they can be more complicated than the traditional URL format you type in. I was again reminded of this when I was parsing Webpack URLs when I saw this beauty:

webpack-internal:///../rbd/pnpm-volume/144384a5-85d9-4142-b9b9-168eea22eb97/node_modules/.registry.npmjs.org/fbjs/0.8.17/node_modules/fbjs/lib/isNode.js

I parsed the URL with new URL("....") but saw that the pathname included every leading slash:

///../rbd/pnpm-volume/144384a5-85d9-4142-b9b9-168eea22eb97/node_modules/.registry.npmjs.org/fbjs/0.8.17/node_modules/fbjs/lib/isNode.js

Since I wanted to display a sane pathname, I wanted to figure out how to remove/replace repeated characters with JavaScript. It was actually easier than I thought it would be:

const prettyPath = urlObj.pathname.replace(/\/{2,}/g, "/");

// > /../rbd/pnpm-volume/144384a5-85d9-4142-b9b9-168eea22eb97/node_modules/.registry.npmjs.org/fbjs/0.8.17/node_modules/fbjs/lib/isNode.js

The {2,} part of the regular expression only allows for one of the repeated characters, and /g ensures that multiple instances within the string will have the repeat character removed.

Just when I thought I'd seen it all this Webpack URL surprised me. Luckily a small regex let me show a pretty URL in page to the user!

Recent Features

By David WalshNovember 26, 2012
Animated 3D Flipping Menu with CSS
CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more. I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...
By Eduardo BouçasJanuary 5, 2015
Write Simple, Elegant and Maintainable Media Queries with Sass
I spent a few months experimenting with different approaches for writing simple, elegant and maintainable media queries with Sass. Each solution had something that I really liked, but I couldn't find one that covered everything I needed to do, so I ventured into creating my...

Incredible Demos

By David WalshNovember 29, 2012
CSS :target
One interesting CSS pseudo selector is :target. The target pseudo selector provides styling capabilities for an element whose ID matches the window location's hash. Let's have a quick look at how the CSS target pseudo selector works! The HTML Assume there are any number of HTML elements with...
By David WalshDecember 12, 2008
Send Email Notifications for Broken Images Using jQuery AJAX
It's usually best to repair broken image paths as soon as possible because they can damage a website's credibility. And even worse is having a user tell you about it. Using jQuery and PHP, you can have your page automatically notify you of broken...

Replace Repeated Characters with JavaScript

Recent Features

Animated 3D Flipping Menu with CSS

Write Simple, Elegant and Maintainable Media Queries with Sass

Incredible Demos

CSS :target

Send Email Notifications for Broken Images Using jQuery AJAX

Discussion