CODEWITHSUNDEEP
jquery
Nisse Karlsson
Nisse Karlsson

Reputation: 139

How can i change the url with jquery

I'm totally new in jquery and userscripts. Can someone help me with this:

<a class="image is-100x100" href="/profile/myprofile">
   <img class="profile-img" src="https://cdn.blabla/folder/blurr/100x100/content/166634.jpg" alt="">
</a>

I want to change one word in the url. (blurr) in to (default)

<a class="image is-100x100" href="/profile/myprofile">
   <img class="profile-img" src="https://cdn.blabla/folder/default/100x100/content/166634.jpg" alt="">
</a>

How can i do this?

$(function () {
    $(".profile-img").html($(".profile-img").html().replace("blurr", "default"));

    });

EDIT:

I want an tapermonkey script not an script for concole.

Upvotes: 0

Views: 157

Answers (5)

Al.G.
Al.G.

Reputation: 4406

All answers above use call the attr() function twice. This doesn't make the code worse but it's a bit too long. You can instead use a callback to shorten it:

$(".profile-img").attr("src", (_, old) => old.replace('blur', 'default'));

The second argument of attr here is a function which returns the new value based on the old one.

http://api.jquery.com/attr/#attr-attributeName-function

Upvotes: 1

Ravi Pipaliya
Ravi Pipaliya

Reputation: 219

Try this:

$(".profile-img").attr("src").replace('blurr', 'default');

Find the snippet below:

var updatedSrc = $(".profile-img").attr("src").replace('blurr', 'default');
$(".profile-img").attr("src",updatedSrc);
alert($(".profile-img").attr("src"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="image is-100x100" href="/profile/myprofile">123
   <img class="profile-img" src="https://cdn.blabla/folder/blurr/100x100/content/166634.jpg" alt=""/>
</a>

Update:

You must use your script after document is properly loaded. So I just moved your script at the end of the html body.

Review below example:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>

<a class="image is-100x100" href="/profile/myprofile">
   <img class="profile-img" src="https://cdn.blabla/folder/blurr/100x100/content/166634.jpg" alt="">
</a>
<script>
(function() {
 var src= $('img').attr('src');
    src = src.replace("blurr", "default")
    $('img').attr('src',src);
console.log($('img').attr('src'));
})();
</script>
</body>
</html>

Upvotes: 5

Umesh Aawte
Umesh Aawte

Reputation: 4690

  1. Get a URL using jQuery attr function which return the value of attribute.

    var url = $(".profile-img").attr("src");

  2. Replace the value in string you want to replace

    var editedUrl = url.replace("blurr", "default");

  3. Set the new value as src using same attr setter function

    $(".profile-img").attr("src",editedUrl);

Combined code will look like 

var url = $(".profile-img").attr("src");
var editedUrl = url.replace("blurr", "default");
$(".profile-img").attr("src",editedUrl);

Referance for javascript replace function,

https://www.w3schools.com/code/tryit.asp?filename=FQI3GTEMQDE6

Upvotes: 1

4b0
4b0

Reputation: 22323

Change image src using attr. 

var src= $('img').attr('src');
src = src.replace("blurr", "default")
$('img').attr('src',src);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="image is-100x100" href="/profile/myprofile">123
   <img class="profile-img" src="https://cdn.blabla/folder/blurr/100x100/content/166634.jpg" alt=""/>
</a>

Run the above snippet and inspect you can see URL is change.

Out put result

Upvotes: 1

Roy Bogado
Roy Bogado

Reputation: 4452

You have to acceed to the SRC atribute

$(".profile-img").attr('src',$(".profile-img").attr('src').replace("blurr", "default"));

Upvotes: 2

Related Questions