JS RegEx to remove part of a URL?

Question

I am using the GoogleBooks API to search for particular titles by name and retrieve a cover image URL. For example, searching for "The Great Gatsby" will return the following image link:

http://books.google.com/books/content?id=HestSXO362YC&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api

If you look at the following image, you can see that there is a small fold on the bottom right corner. Some image URLs will have the fold and others won't. If you remove edge=curl from the URL link, the fold is removed.

Is there any way to use a regex to find and delete the curled portion?

Further, is there any way to use regex to change the img=1 value to img=2?

Ahmed Gaafer · Accepted Answer · 2019-12-21 19:54:19Z

1

you can use the .replace() method

let URL = "some random URL you have"
console.log(URL.replace('&edge=curl',''))

Will replace every "&edge=curl" that it finds in this string and replace it with '' an empty string which is basically removing it.

You can also use the same method .replace() to replace any static URL variables like "img=1"

console.log(URL.replace('img=1','img=2'))

edited Dec 21, 2019 at 19:54

answered Dec 21, 2019 at 19:51

Ahmed Gaafer

1,6811 gold badge11 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kiwon Yun Over a year ago

Thanks. Super new to all this, and this is very obvious in retrospect. Appreciate it.

Ahmed Gaafer Over a year ago

Can you mark this answer as correct or upvote it to help future viewers of the question

Dacre Denny Over a year ago

Something to note is that this relies on the value of img being known before it's updated which may be tricky in some cases. This approach will updated the parameter regardless of the value in the input string: stackoverflow.com/questions/59439323/…

Salman Arshad · Accepted Answer · 2019-12-21 20:53:15Z

1

Don't use regex to parse URLs. Use URL object:

var u = new URL("http://books.google.com/books/content?id=HestSXO362YC&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api");

u.searchParams.delete("edge");
u.searchParams.set("img", "2");

console.log(u.href);

edited Dec 21, 2019 at 20:53

answered Dec 21, 2019 at 20:28

Salman Arshad

274k85 gold badges450 silver badges540 bronze badges

Comments

Dacre Denny · Accepted Answer · 2019-12-21 21:13:39Z

1

To obtain an updated url where the &edge=curl pattern is replaced and the &img= and &zoom= parameters are updated, you could achieve this by chaining multiple .replace() calls as shown below:

const url = "http://books.google.com/books/content?id=HestSXO362YC&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api"

// New values for img and zoom parameters
const img = 300;
const zoom = 22;

console.log(
url
.replace(/&img=(\w+)/,`&img=${img}`)    
.replace(/&zoom=\w+/,`&zoom=${zoom}`)
.replace(/&edge=curl/,"")
)

Here the &img= and &zoom= parameters are updated with regular expressions &img=\w+ and &zoom=\w+, where \w+ will match one or more alpha numeric characters that appear after the parameter.

The advantage with this approach (over explicitly specifying img=1 and replacing it with img=2 ) is that you can update those parameter/value substrings of the input url without having to know the actual value of those parameters prior to replacement (ie that img has a value 1).

Note that this approach assumes the parameters being updated are prefixed with & (and not ?).

Hope that helps!

edited Dec 21, 2019 at 21:13

answered Dec 21, 2019 at 19:56

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

2 Comments

Salman Arshad Over a year ago

What if img is the first query string parameter e.g. /content?img=asdf&id=fdsa?

Salman Arshad Over a year ago

The edit makes it worse, it'll match ?ximg=123! you could test for (?|&)img=[^&]*

Ahmed HENTETI · Accepted Answer · 2019-12-21 19:55:42Z

0

try this

let url = 'http://books.google.com/books/content?id=HestSXO362YC&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api';
// remove &edge=curl
url = url.replace('&edge=curl', '');
// replace img=1 with img=2
url = url.replace('img=1', 'img=2');

edited Dec 21, 2019 at 19:55

answered Dec 21, 2019 at 19:50

Ahmed HENTETI

1,1488 silver badges19 bronze badges

Collectives™ on Stack Overflow

JS RegEx to remove part of a URL?

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related