更改文本区域中的 iframe 值

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 来访问文本区域值。

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

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

我需要从输入更改 iframe 宽度/高度

Answer 1

您可以将

replace与regexp一起使用，以从文本区域更新字符串。

$('#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);
});

<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>