onClick change img tag to image urls

Question

I want to change or replace code <img src> on textarea to images URLs when click the button.

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

the result should be

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

What can I do to change the <img> to image URLs when click.

score 1 · Answer 1 · answered May 16 '18 at 07:59

1

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

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

});

answered May 16 '18 at 07:59

Ulasoft Koinot Uz

95
1
7

score 0 · Accepted Answer · answered May 16 '18 at 08:15

As far as I know img tags are not allowed inside textarea tags and because of that all img tags inside textarea tags are interpreted as text by the browser, because of that you just need to use a function to replace that text with the one that you like and assign that function to the button, for example:

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

andrea06590 · Answer 3 · 2018-05-16T08:35:13.710

You did not ask a good question, what you want to achieve is getting the src url in img html tag.

If so try to create a JS onClick function that get the textarea content, and extract it :

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

You can also use querySelector for that

Yes indeed i forgot that textarea, but maybe he could try to get the textarea content and store it as html collection, then loop on it ? — andrea06590, May 16 '18 at 08:16

score -1 · Answer 4 · edited May 16 '18 at 08:10

-1

Did you read this question first? You simply change the source attribute of the images. Here's how:

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

edited May 16 '18 at 08:10

Rory McCrossan

331,213
40
305
339

answered May 16 '18 at 08:02

Syno

1,056
10
25

The `img` are in the value of the `textarea`, ie. a string, not the DOM. Therefore selecting them through jQuery isn't going to work. – Rory McCrossan May 16 '18 at 08:11

onClick change img tag to image urls

4 Answers4