визуализировать изображение как изображение в textarea

Question

Я использую textarea для получения информации от пользователей. Я хочу добавить функцию к textarea, где они смогут добавить внешнюю ссылку на изображение, размещенную на другом веб-сайте, и отобразить изображение, а не ссылку на изображение в представленном содержимом textarea.

Это пример того, что я хочу ...

Это текст из текстового поля и изображения правильно обработаны ниже.

До сих пор, это то, что я пытался и бросали ошибку.

To add an image, put the link like this: <br/> 
    <span>http://res.cloudinary.com/wisdomabioye/image/upload/v1470139046/404_zx728k.png</span> 

var result = document.getElementById('result'); 
 
btn = document.getElementById('button'); 
 

 
btn.addEventListener('click', function(){ 
 
// adding new line here 
 
var content = document.querySelector('textarea').value; 
 
var finalText = content.replace(/\n/g, '<br/>'); 
 
    
 
// I want to use jQuery or Vanilla JavaScript to get the text content of the span element and do something like this 
 
var link = finalText.find($('span')).text(); 
 
    
 
finalText += "<img src='"+ link +"'/>"; 
 
    
 
result.innerHTML = finalText; 
 
    
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    
 
<br/> 
 

 
<textarea cols=33 rows= 10 > </textarea> 
 

 

 
<input type="button" value='submit' id="button"> 
 

 

 
<div id="result"> </div>

Ошибка

error{ 
    "message": "Uncaught TypeError: finalText.find is not a function", 
    "filename": "http://stacksnippets.net/js", 
    "lineno": 32, 
    "colno": 23 
} 

Answer 1

находка() представляет собой метод массива, а finalText является строкой.

Это быстрое решение, которое я нашел.

var result = document.getElementById('result'); 
 
btn = document.getElementById('button'); 
 

 
btn.addEventListener('click', function(){ 
 
// adding new line here 
 
var content = document.querySelector('textarea').value; 
 
var finalText = content.replace(/\n/g, '<br/>').replace('span>', 'img src="').replace('</span', '"'); 
 
result.innerHTML = finalText; 
 
    
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    
 
<br/> 
 

 
<textarea cols=33 rows= 10 > </textarea> 
 

 

 
<input type="button" value='submit' id="button"> 
 

 

 
<div id="result"> </div>