Replace all the relative path with absolute path and ignore the paths that is already absolute using regex

Question

I have the following string,

Some text ![test1](assets/image1.png) \n some text ![test2](https://example.com/assets/image2.png) some other text \n ![test3](assets/image3.png)

I want to replace all the relative image paths i.e. assets/image1.png to https://example.com/assets/image1.png and same for assets/image3.png. But we need to ignore https://example.com/assets/image2.png as it is already absolute path.

So far I have been able to do the following,

const getImagesWithAbsolutePath = (text, absolutePathPrefix) => {
    if (!text) return ''
    const regex = /(\!\[.*\]\()(.*)(\))/g
    return text.replace(regex, '$1' + absolutePathPrefix + '/$2?raw=true$3')
}

myText = "Some text ![test1](assets/image1.png) \n some text ![test2](https://example.com/assets/image2.png) some other text \n ![test3](assets/image3.png)";

myDomain = "https://example.com";

console.log(getImagesWithAbsolutePath(myText, myDomain));

As you can see the output is,

 Some text ![test1](https://example.com/assets/image1.png?raw=true) 
 some text ![test2](https://example.com/https://example.com/assets/image2.png?raw=true) some other text 
 ![test3](https://example.com/assets/image3.png?raw=true)

But I need the result to be,

Some text ![test1](https://example.com/assets/image1.png?raw=true) 
some text ![test2](https://example.com/assets/image2.png?raw=true) some other text 
![test3](https://example.com/assets/image3.png?raw=true)

Use lazy dot (`/(\!\[.*?\]$)(.*?)($)/g`), or negated character classes. — Wiktor Stribiżew, Mar 26 '21 at 11:59
@WiktorStribiżew Thanks, It doesn't work. Returns the same result. — sabbir.alam, Mar 26 '21 at 12:03
Besides this question is not duplicate. I have seen that question and it doesn't actually help. Thanks. — sabbir.alam, Mar 26 '21 at 12:05
Anyway, you really need to use lazy dot/negated character classes in the pattern to handle multiple matches on the same line. I was tricked at first because I did not spot all `\n` in your sample string literals. It is a good idea to also add the literal text you deal with to the question, but code is always good, too, sure. — Wiktor Stribiżew, Mar 26 '21 at 12:19

score 1 · Accepted Answer · answered Mar 26 '21 at 12:11

You need to

Use lazy dot / negated character classes to make sure you do not match across your (/) and [/] delimiters
Match the myDomain host part optionally, so that it could be removed when you add it back with the replacement:

const myDomain = "https://example.com";
const getImagesWithAbsolutePath = (text, absolutePathPrefix) => {
    if (!text) return ''
    const regex =  new RegExp("(!\\[.*?]\\()(?:" + myDomain.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') + "/*)?(.*?)(\\))", "g")
    return text.replace(regex, '$1' + absolutePathPrefix + '/$2?raw=true$3')
}

let myText = "Some text ![test1](assets/image1.png) \n some text ![test2](https://example.com/assets/image2.png) some other text \n ![test3](assets/image3.png)";

console.log(getImagesWithAbsolutePath(myText, myDomain));

See the regex demo.

Details:

(!\[.*?]\() - Group 1: !, [, any zero or more chars other than line break chars as few as possible, ](
(?:https:\/\/example\.com\/*)? - an optional occurrence of https://example.com string and then zero or more / chars
(.*?) - Group 2: any zero or more chars other than line break chars as few as possible
(\)) - Group 3: ) char.

NOTE: if you happen to have $ + digit in the absolutePathPrefix (myDomain), you will need to replace with '$1' + absolutePathPrefix.replace(/\$/g, '$$$$') + '/$2?raw=true$3'.

Thanks a lot. At first, I was not sure how it was working. Your explanation helped a lot. Kudos! — sabbir.alam, Mar 26 '21 at 12:17

Replace all the relative path with absolute path and ignore the paths that is already absolute using regex

1 Answers1