更改 textarea 中的 iframe 值答案

【问题标题】：Change iframe values in textarea更改 textarea 中的 iframe 值
【发布时间】：2018-07-03 15:14:12
【问题描述】：

我的代码：

<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 宽度/高度

【问题讨论】：

您可以使用 jQuery 的 .attr() 方法更改“src”属性。
如果您在输入的 HTML 字符串中设置这些属性，为什么在文本区域中有可编辑的字符串？在填写完输入后构建字符串然后将其显示为另一个（不可编辑的）元素中的字符串会更有意义。
@laylarenee 我该怎么做？ var iframe = $('#iframe_url').val(); iframe.attr('宽度', '700');或 iframe.width('700');但它不好:)
@RoryMcCrossan 真的！
您正在尝试对字符串（textarea 值）使用 jquery 方法。您需要先将该字符串转换为一个元素（jQuery 对象）...操作该元素，然后将其作为 html 字符串返回给 textarea。但是，如果 textarea 的全部目的只是为了这个 iframe html，我同意有更好的方法来做到这一点

标签： javascript jquery html iframe

【解决方案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>

【讨论】：