Change the querystring using RegEx

Question

I want to replace the part of the given URL using button click.When I click play button need change autoplay=0 to autoplay=1 and When I click close button need change autoplay=1 to autoplay=0

jQuery(document).ready(function($) {
  $('.playButton').click(function() {
    alert('play');
    $("iframe").src = src.replace(/\&autoplay\=\d/, "&autoplay=" + 1);
  });

  $(".close_icon").click(function() {
    alert('close');
    $("iframe").src = src.replace(/\&autoplay\=\d/, "&autoplay=" + 0);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe src="https://www.youtube.com/embed/C0DPdy98e4c?width=640&autoplay=1"></iframe>
<div class="playButton">Play</div>
<div class="close_icon">Close</div>

Use attr() to change the src attribute of iframe. $('iframe').attr('src', function(i, oldSrc) { return oldSrc.replace('autoplay=0', 'autoplay=1'); }); — Tushar
– Tushar, Commented Dec 29, 2016 at 8:35
I need to check autoplay is in src and then append So, there can be cases when there is no autoplay=n in the URL? — Tushar
– Tushar, Commented Dec 29, 2016 at 8:52

Tushar · Accepted Answer · 2016-12-29 09:29:22Z

2

You don't need RegEx for this. String replacement can be done.

$("iframe").src will not set the value of src attribute of iframe. Use attr() to change the attribute of an element.

jQuery(document).ready(function($) {
  $('.playButton').click(function() {
    $("iframe").attr('src', function(i, oldSrc) {
      if (oldSrc.indexOf('autoplay') === -1) {
        // If autoplay is not on URL, add it
        oldSrc += '&autoplay=1';
      }

      return oldSrc.replace('autoplay=0', 'autoplay=1');
    });
  });

  $(".close_icon").click(function() {
    $("iframe").attr('src', function(i, oldSrc) {
      return oldSrc.replace('autoplay=1', 'autoplay=0');
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe src="https://www.youtube.com/embed/C0DPdy98e4c?width=640"></iframe>
<div class="playButton">Play</div>
<div class="close_icon">Close</div>

The code can be DRY'd as follow

jQuery(document).ready(function($) {
    // To update the value of autoplay in the URL of iframe src attribute
    var changeAutoplay = function(newValue) {
        $('iframe').attr('src', function(i, oldSrc) {
            return oldSrc.replace(/autoplay=\d/, 'autoplay=' + newValue);
        });
    };

    $('.playButton').click(function() {
        changeAutoplay(1);
    });

    $(".close_icon").click(function() {
        changeAutoplay(0);
    });
});

edited Dec 29, 2016 at 9:29

answered Dec 29, 2016 at 8:37

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

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

4 Comments

user3386779 Over a year ago

I need to check autoplay is in src and then append

Tushar Over a year ago

@user3386779 To check if a string exists in other string, you can use indexOf(). In your case you can also use /autoplay=\d/.test(url)

Tushar Over a year ago

@user3386779 I've added condition in if in the play callback. I guess there is no need to do same in stop callback.

Tushar Over a year ago

@user3386779 I've removed the autoplay from the URL in the above snippet. You can see autoplay is added when you click on play button.

Bud Damyanov · Accepted Answer · 2016-12-29 08:42:47Z

1

As you can see, there is an error from the console Uncaught ReferenceError: src is not defined, which means that you try to use non-existent property, try with:

$("iframe").attr("src", function(index, value){ return value.replace("autoplay=0", "autoplay=1") })

Collectives™ on Stack Overflow

Change the querystring using RegEx

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related