Question

我想在点击按钮时将textarea上的代码<img src>更改或替换为图片网址。

<textarea>
  <img src="https://example.com/image1.gif" alt="image1" /></a>
  <img src="https://example.com/image2.gif" alt="image2" /></a>
  <img src="https://example.com/image3.gif" alt="image3" /></a>
</textarea>
<input type="submit" id="Button" value="Submit" />

结果应该是

<textarea>
    https://example.com/image1.gif
    https://example.com/image2.gif
    https://example.com/image3.gif
</textarea>

点击时，我该怎么做才能将<img>更改为图片网址。

Answer 1

$('#Button').submit(function(e){

  var text = $('#html').val();
  var cleanText = text.replace(/(<([^>]+)>)/ig,"");
  $('#html').val(cleanText);
  e.preventDefault();

});

Answer 2

据我所知img标签不允许在textarea标签内，因为textarea标签内的所有img标签都被浏览器解释为文本，因此你只需要使用一个函数来替换该文本。你喜欢的那个并将该功能分配给按钮，例如：

function trimTextAreaValue() {
    var tag = document.querySelector('textarea')
    tag.value = tag.value.replace(/<img.+src="([^"]+)".+>/g, "$1")
}

Answer 3

你没有问一个好问题，你想要实现的是在img html标签中获取src url。

如果是这样，尝试创建一个获取textarea内容的JS onClick函数，并将其解压缩：

var textArea = document.getElementsByTagName("textarea");

var hiddenDiv = document.createElement("div");
hiddenDiv.setAttribute("type", "hidden");
hiddenDiv.setAttribute("innerHtml", textArea[0].innerHtml);

// append to body or a prepared div so that you can retrieve it
var myDiv = document.getElementById("myDiv");
myDiv.appendChild(hiddenDiv);

var allImgArray = myDiv.getElementsByTagName('img');
var allLinkArray = [];

for (var i = 0; i < allImgArray.length; i++) { 
    allLinkArray.push(allImgArray[i].getAttribute('src'));
})

你也可以使用querySelector

Answer 4

您是否先阅读this question？您只需更改图像的源属性即可。方法如下：

$('#changeSource').click(function(){
  $('#img1').attr('src', 'https://example.com/image1.gif');
  $('#img2').attr('src', 'https://example.com/image2.gif');
  $('#img3').attr('src', 'https://example.com/image3.gif');
});

<img id="img1" src="https://example.com/image1.gif" alt="image1" /></a>
<img id="img2" src="https://example.com/image2.gif" alt="image2" /></a>
<img id="img3" src="https://example.com/image3.gif" alt="image3" /></a>

<button id="changeSource">Change Image Source</button>

onClick将img标记更改为图片网址

4 个答案: