how to replace a substring inside an iframe tag

Question

In the example below only one instance of substring (~code) is replaced by a variable value.

How to replace the same inside the iframe tag, i.e. embed/~code should be embed/92xR2fjbeUE

let file = $('#store_vid').html();
let code = '92xR2fjbeUE';
file = file.replace('~code', code);
console.log(file);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='store' id='store_vid'>
<div class = 'vidwrap' data-code='~code'>
<iframe src='https://www.youtube.com/embed/~code?rel=0&fs=0&modestbranding=1&showinfo=0'></iframe>
</div></div>

Does this answer your question? [How to replace all occurrences of a string?](https://stackoverflow.com/questions/1144783/how-to-replace-all-occurrences-of-a-string) — 3limin4t0r, Apr 20 '20 at 13:19
@3limin4t0r - I see thanks. I'm surprised - that's such a minor task and I must study `63` answers. Not good for the reputation of this site. — qadenza, Apr 20 '20 at 13:38
That's not the fault of SO that such a widely sought after question isn't implemented by the language itself. You also don't have to look at all the answers. If you find that there are too many I suggest looking only at the top rated few. — 3limin4t0r, Apr 20 '20 at 15:09

score 2 · Answer 1 · answered Apr 20 '20 at 13:03

what I get by your question is, you want to replace ~code with your variable , and ~code is attributed to a div of yours. if you don't want to change the iframe src ~code then don't use code in if condition.

`<div class = 'vidwrap' data-code='~code'>`

document.addEventListener('DOMContentLoaded', (event) => {
  var code = '92xR2fjbeUE';
  document.getElementById("vidwrap").setAttribute("data-code", code);
  let iframeAttrSrc = document.getElementById("iframe").src;
  
  if(iframeAttrSrc.includes('~code')){
    alert("true");
    var newSRC = iframeAttrSrc.replace("~code", code);
    document.getElementById("iframe").setAttribute("src", newSRC);
  }
  

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='store' id='store_vid'>
<div class='vidwrap' data-code='~code' id="vidwrap">
<iframe id="iframe" src='https://www.youtube.com/embed/~code?rel=0&fs=0&modestbranding=1&showinfo=0'></iframe>
</div></div>

Beingnin · Accepted Answer · 2020-04-20T12:56:12.800

1

By default js try to replace the first instance of substring only. You can extend the string type like this

String.prototype.replaceAll = function (search, replacement) {
    var target = this;
    return target.replace(new RegExp(search, 'g'), replacement);
};

Use the above method instead of replace

'12sdasdsadasd12asdasda12asdad'.replaceAll('12','89')//returns 89sdasdsadasd89asdasda89asdad

In your example

    String.prototype.replaceAll = function (search, replacement) {
        var target = this;
        return target.replace(new RegExp(search, 'g'), replacement);
    };

    let file = $('#store_vid').html();
    let code = '92xR2fjbeUE';
    file = file.replaceAll('~code', code);
    console.log(file);

edited Apr 20 '20 at 12:56

answered Apr 20 '20 at 12:45

Beingnin

2,288
1
21
37

In my example I'm getting the error - `replaceAll is not a function` – qadenza Apr 20 '20 at 12:50
create it like i wrote before you use it – Beingnin Apr 20 '20 at 12:51
and I tried with 5 instances, all of them are replaced, not only the first, just the one inside `iframe` tag is not – qadenza Apr 20 '20 at 12:53
i am getting it fine only https://jsfiddle.net/8ws5cm6t/ check the fiddle console – Beingnin Apr 20 '20 at 12:57
do I really must create a new function? I suppose that a function for replcing all instances of substing already exists – qadenza Apr 20 '20 at 12:58
Thats your choice. I just demonstrated it – Beingnin Apr 20 '20 at 12:58
Note that this answer doesn't escape special regex characters. Meaning that `"1*3".replaceAll("*", "2")` fails with *"SyntaxError: nothing to repeat"*. – 3limin4t0r Apr 20 '20 at 13:15
Oops. I didnt notice that yet – Beingnin Apr 20 '20 at 13:22

how to replace a substring inside an iframe tag

2 Answers2