javascriptregexstringreplacecapture-group

Replace the string after second forward slash using a RegEx


Having a string (URL path) as for example: /this/is/some/url I would like to remove the first occurrence of / and change the string after the second forward slash (in the example some) by another string let's say is. The result should be this/is/a/url and this is what I have:

let myUrl = '/this/is/some/url';
let splitUrl = myUrl.split('/').filter(v => v !== '');

splitUrl[2] = 'a';
let newUrl = splitUrl.join('/');

console.log(newUrl); // this/is/a/url

But now I wanted to change that into a RegEx so I came up with this:

const myUrl = '/this/is/some/url';
const modifiedUrl = myUrl.replace(/[a-zA-Z0-9]/, 'a').replace(/^\//, '');

console.log(modifiedUrl); // ahis/is/some/url

But the result is not what I want since it outputs: ahis/is/some/url. I'll admit that I am not so good with RegEx.

A few SO posts here and here did not help me since I still did not get how to replace only the content after the second forward slash.

Can I get some help?


Solution

  • You can use

    let myUrl = '/this/is/some/url';
    const modifiedUrl = myUrl.replace(/\/((?:[^\/]*\/){2})[^\/]*/, '$1a');
    console.log(modifiedUrl); // this/is/a/url

    See this regex demo. Details:

    The replacement is the backreference to the Group 1 value + the new string that will be inserted in the resulting string.

    To also replace the next URL subpart, just add \/[^\/]* to the regex pattern:

    let myUrl = '/this/is/some/url';
    const str1 = 'content1';
    const str2 = 'content2'
    const rx = /\/((?:[^\/]*\/){2})[^\/]*\/[^\/]*/;
    
    const modifiedUrl = myUrl.replace(rx, '$1' + str1 + '/' + str2);
    
    console.log(modifiedUrl); // this/is/content1/content2

    The main idea stays the same: capture the text before the text you want to replace, then just match what you need to replace, and - in the replacement - use a backreference to the text captured, and append the text to replace with.

    NOTE: If your replacement text contains a literal $ followed with a digit that you actually do not want to treat as a backreference, but as a literal text, you should add .replace(/\$/g, '$$$$') to each variable, str1 and str2 in the code above.