Javascript操纵HTML字符串

时间:2017-06-14 11:15:08

标签: javascript jquery

我有一个这样的字符串:

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

现在我想根据javascript事件将一些参数切换到src属性。

please see the JsFiddle

1 个答案:

答案 0 :(得分:1)

在字符串中操作HTML创建空元素并使用字符串设置其内容。后来做你想做的事。

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>