イメージをテキストエリアのイメージとしてレンダリング

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>