jQueryまたはJavaScriptを使用してテキストから画像を抽出することはできますか？

Question

おはよう、私はckeditorで記事のコンテンツを作ろうとしています。ここに私の入力からの例があります。

<p>I have two images&nbsp;<img alt="" src="http://localhost:84/lf//assets/images/commingsoon.png" style="height:225px; width:225px" />&nbsp;and this&nbsp;&nbsp;<img alt="" src="http://localhost:84/lf//assets/images/article2.jpg" style="height:91px; width:122px" /></p> 

ご覧のとおり、2つの画像があり、最初の画像をサムネイルとして表示します。今のところ、私はそれを抽出したいだけです。

抽出物からの結果は、この

http://localhost:84/lf//assets/images/commingsoon.png 

のようなものである

---

var myString = '<p>I have two images&nbsp;<img alt="" src="http://localhost:84/lf//assets/images/commingsoon.png" style="height:225px; width:225px" />&nbsp;and this&nbsp;&nbsp;<img alt="" src="http://localhost:84/lf//assets/images/article2.jpg" style="height:91px; width:122px" /></p>'; 
var result = (someprosess) 

Answer 1

文字列の最初の画像のURLには、find(),first()およびattr()を使用してアクセスできます。

var myString = '<p>I have two images&nbsp;<img alt="" src="http://localhost:84/lf//assets/images/commingsoon.png" style="height:225px; width:225px" />&nbsp;and this&nbsp;&nbsp;<img alt="" src="http://localhost:84/lf//assets/images/article2.jpg" style="height:91px; width:122px" /></p>'; 
 
var result = $(myString).find('img').first().attr('src'); 
 
console.log(result);

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

Answer 2

あなたはどちらか JavaScriptまたは jQueryは、画像の最初のインスタンスを検索し、そのSRCを解析するために使用することができます

たとえば、jQueryを使用する場合（コンテンツ内に常にイメージが存在する場合）

var imgPointer = $('body').find('img'); 
var imgSrc = imgPointer[0].attr('src'); 

Answer 3

ここでは、これがお手伝いしますjQuery

console.log($('p').find('img:first').attr('src'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>I have two images&nbsp;<img alt="" src="http://localhost:84/lf//assets/images/commingsoon.png" style="height:225px; width:225px" />&nbsp;and this&nbsp;&nbsp;<img alt="" src="http://localhost:84/lf//assets/images/article2.jpg" style="height:91px; width:122px" /></p>

希望を用いて、溶液で行きます。