CODEWITHSUNDEEP
javascriptjqueryreplace
Danny Cooper
Danny Cooper

Reputation: 355

Replace String in HTML With Certain Characteristics

I need to replace every instance of a an img tag that starts with http://player.vimeo.com with another url.

For example, you might find this in the code of the page:

<img src="http://player.vimeo.com/video/4887233">

I'm trying to make a jQuery script that will find every img src that begins with http://player.vimeo.com and replace the src with another string (it will be the same string for every vimeo link, essentially one variable).

How do I find the vimeo links and make sure the entire link is replaced no matter the length (some links will be longer than others but will always start with the same string)?

Upvotes: 0

Views: 322

Answers (5)

mekwall
mekwall

Reputation: 28974

Select all the img with an attribute starts with selector:

$("img[src^='http://player.vimeo.com]'").each(function(){
    this.src = this.src.replace("player.vimeo.com", "new.url.com");
});

The above will replace player.vimeo.com in the src with new.url.com. If you need to set another src altogether, just do this.src = 'new url';.

It's worth noting that when you want to change native attributes such as src, each will perform much better compared to attr, as can be seen in this jsPerf.

Check out demo on jsFiddle.

Upvotes: 4

Viktor S.
Viktor S.

Reputation: 12815

http://api.jquery.com/attribute-starts-with-selector/

$("img[src^=\"http://player.vimeo.com\"]").attr("src", "new_string")

or 

$("img[src^=\"http://player.vimeo.com\"]").attr("src", function(i, val) {return val.replace("http://player.vimeo.com", "new url")})

Not enough clear from a question if it should replace whole link or just 'http://player...' with some another string, so code for both cases.

According to Markus Ekwall comment, attr is slower than each, so it would be better to replace code above with:

$("img[src^=\"http://player.vimeo.com\"]").each(function() {this.src = "new_string";});

or 

$("img[src^=\"http://player.vimeo.com\"]").each(function() { this.src = this.src.replace("http://player.vimeo.com", "new url"); })

Upvotes: 2

Lucky
Lucky

Reputation: 17345

Access the href attribute of an element using it id and pass your updated href string url to the attr method:

 <script>
    $(document).ready(function(){
    $("button").click(function(){
    $("#link").attr("href","http://www.example.com/login.html"); //pass ur new url here
  });
});
 </script>

inside the html body:

<p><a href="http://www.example.com" id="link">Link name</a></p>

Upvotes: 0

nirazul
nirazul

Reputation: 3955

Use this if you only want to replace the search-url.

$(function(){
    $('img').each(function(index,elem) {
        var newValue = "http://youtube.com";

        var $this = $(this);
        var strSrc = $this.attr('src');
        var regTest = /http:\/\/player\.vimeo\.com/;

        if(regTest.test(strSrc)) {
            $this.attr('src', strSrc.replace(regTest, newValue) );
        }
    });
});

Upvotes: -1

David Hellsing
David Hellsing

Reputation: 108500

You could do a filter() on each element and match the src attribute, then replace it:

$('img').filter(function() {
    return /^http:\/\/player\.vimeo\.com/.test(this.src);
}).attr('src', 'somethingelse');

You can also use a function instead of 'somethingelse' if you want to do individual replacements, f.ex:

.attr('src', function(i, src) {
    return src.replace(/vimeo/,'youtube');
})

Upvotes: 1

Related Questions