在textarea中将图像链接渲染为图像

Question

我使用textarea来获取用户的信息。 我想在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

find（）是一个数组方法，而finalText是一个String。

这是我发现的快速解决方案。

＆＃13;

＆＃13;

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;
  


});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;