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>

正如您所看到的，有两个图像，我想将第一个图像作为我的缩略图。现在，我只想提取它。

摘录的结果是这样的

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

您可以使用JavaScript或jQuery搜索图片的第一个实例并解析其src

例如，使用jQuery（如果内容中总是会有图像）

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

Answer 2

您可以使用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>

希望这会对你有所帮助。

Answer 3

您可以使用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>

是否可以使用jQuery或JavaScript从文本中提取图像？

3 个答案: