Question

我的代码：

<p>
<label for="color">Choose a color</label>
<input type="color" name="color" id="color">
</p>

<p>
<label for="width">Change width</label>
<input type="text" name="width" id="width">
</p>

<textarea id="iframe_url" name="iframe_url" rows="3">
<iframe id="widget" src="http://domain.tld?e=1&color=#f5f5f5" width="650" height="600">
</textarea>

我使用jQuery访问textarea值。

<script>
var iframe = $("iframe_url").val();
</script>

我需要在iframe src url中更改颜色十六进制

我需要从输入

更改iframe宽度/高度

Answer 1

您可以replace与regexp一起使用来更新textarea中的字符串。

＆＃13;

$('#color').on('change', function() {
  var updatedContent = $('#iframe_url').val().replace(/color=\#{1}\d*\w*/, `color=${$(this).val()}`);

  $('#iframe_url').val(updatedContent);
});

$('#width').on('change', function() {
  var updatedContent = $('#iframe_url').val().replace(/width="\d+"/, `width="${$(this).val()}"`);

  $('#iframe_url').val(updatedContent);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <label for="color">Choose a color</label>
  <input type="color" name="color" id="color">
</p>

<p>
  <label for="width">Change width</label>
  <input type="number" type="number" min="0" step="1" name="width" id="width">
</p>

<textarea id="iframe_url" name="iframe_url" rows="3" readonly>
<iframe id="widget" src="http://domain.tld?e=1&color=#f5f5f5" width="650" height="600">
</textarea>

＆＃13;

在textarea中更改iframe值

1 个答案: