onClick изменить тег img на URL изображения

Question

Я хочу изменить или заменить код <img src> в текстовой области на URL-адреса изображений при нажатии кнопки.

<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> на URL изображения при нажатии.

Answer 1

Насколько я знаю, теги img недопустимы внутри тегов textarea, и поэтому все теги img внутри тегов textarea интерпретируются браузером как текст, потому что вам просто нужно использовать функцию для замены этого текста на тот, который вам нравится, и назначьте эту функцию кнопке, например:

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

Answer 2

Вы не задали хороший вопрос, чего вы хотите добиться - получить src url в теге img html.

Если это так, попробуйте создать функцию 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 3

Вы сначала прочитали этот вопрос ?Вы просто меняете исходный атрибут изображений.Вот как:

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

Answer 4

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

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

});