Javascript manipulate HTML string

Question

I have a string like this:

 <iframe src="http://example.go2cloud.org/aff_l?offer_id=90" scrolling="no" frameborder="0" width="1" height="1"></iframe>  godaddy

Now I wanna to toggle some parameter into src attribute based on a javascript event.

please see the JsFiddle

@gaetanoM fiddle seems fine to me

Carsten Løvbo Andersen
– Carsten Løvbo Andersen

2017-06-14 11:18:06 +00:00
Commented Jun 14, 2017 at 11:18 — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Jun 14, 2017 at 11:18
@CarstenLøvboAndersen Yes, the link now works. Thanks

gaetanoM
– gaetanoM

2017-06-14 11:18:57 +00:00
Commented Jun 14, 2017 at 11:18 — gaetanoM
– gaetanoM, Commented Jun 14, 2017 at 11:18
Sorry, I fixed it.

mohammad
– mohammad

2017-06-14 11:18:59 +00:00
Commented Jun 14, 2017 at 11:18 — mohammad
– mohammad, Commented Jun 14, 2017 at 11:18

Justinas · Accepted Answer · 2017-06-14 11:51:20Z

1

To manipulate HTML in string create empty element and set it's content with string. Later do what you want.

var string = '<!-- Offer Conversion: godaddy --> <iframe src="http://example.go2cloud.org/usr_l?offer_id=90" scrolling="no" frameborder="0" width="1" height="1"></iframe> <!-- // End Offer Conversion -->';

$('input').change(function() {
  var content = $('<div>');
  content.html(string);
  var iFrameSrc = content.find('iframe').attr('src');

  if ($('#e1').is(':checked')) {
      iFrameSrc += '&e1='+$('#e1').val();
  }

  if ($('#e2').is(':checked')) {
      iFrameSrc += '&e2='+$('#e2').val();
  }
    content.find('iframe').attr('src', iFrameSrc);

  $('#result').show().text(content.html().replace(/&amp;/g, '&'));
});

#result {
  margin-top: 50px;
  background: #dcfffb;
  color: #044f47;
  padding: 10px;
  font-size: 1em;
  font-family: monospace !important;
  text-align: left;
  direction: ltr;
  border: 1px dotted #9dd3cd;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input id="e1" type="checkbox" value="someValue1"/>
  <label for="e1">firstParam</label>
</div>

<div>
  <input id="e2" type="checkbox" value="someValue2"/>
  <label for="e2">secondParam</label>
</div>

<div id="result"></div>

edited Jun 14, 2017 at 11:51

answered Jun 14, 2017 at 11:24

Justinas

43.9k5 gold badges72 silver badges108 bronze badges

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

4 Comments

mohammad Over a year ago

what is amp; ? I don't need it.

Aiwass 418 Over a year ago

& is the character reference for "An ampersand". stackoverflow.com/questions/9084237/what-is-amp-used-for

mohammad Over a year ago

I only need &, How can I do this?

Justinas Over a year ago

@mohammad Simply replace & to &

Collectives™ on Stack Overflow

Javascript manipulate HTML string

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related