通过jquery从html变量中获取特定标记(Get a specific tag from a html variable by jquery)

通过jquery从html变量中获取特定标记(Get a specific tag from a html variable by jquery)

我有一个html格式的变量。 我想从它获得第一个IMG标签。 有一个简单的方法来做到这一点？

var x = "my name is name picture <img src='/img/pic.a' alt='here first pic'><br/>second pic is here <img src='/img/pic.b' alt='this is the second place'> and the third pic <img src='/img/pic.a' alt='pic 3'> <table><tr><td>first coloumn</td><td>second coloumn</td></tr><tr><td>2first coloumn</td><td>2second coloumn</td></tr></table><br/><p>here is it</p><br><a href='/home'>click here</a>.<br/> end"; var pictureNumber = 1; var z = x.split("<img")[pictureNumber].split(">"); $("#strImg").val("<img" + z[0] + "/>");

小提琴就在这里

更新感谢@Tushar的建议，它更简单。 根据他的建议工作繁琐，希望对其他人有用

i have a variable in html format. i want to get the first IMG tag from it. is there a simple way to do this?

var x = "my name is name picture <img src='/img/pic.a' alt='here first pic'><br/>second pic is here <img src='/img/pic.b' alt='this is the second place'> and the third pic <img src='/img/pic.a' alt='pic 3'> <table><tr><td>first coloumn</td><td>second coloumn</td></tr><tr><td>2first coloumn</td><td>2second coloumn</td></tr></table><br/><p>here is it</p><br><a href='/home'>click here</a>.<br/> end"; var pictureNumber = 1; var z = x.split("<img")[pictureNumber].split(">"); $("#strImg").val("<img" + z[0] + "/>");

the fiddle is here

update Thanks to @Tushar for his Advices, it's more simple. working fiddly per his advice is here hope useful for others

最满意答案

您可以使用正则表达式进行提取。

/(<img[^>]+>)/gi

正则表达式说明：

() ：捕获组以访问匹配的结果 <img ：按字面意思匹配<img [^<]+ ：匹配任何不是<东西 > ：匹配> ，图像标记的结尾 gi ：g：全局匹配，i：不区分大小写的匹配

var x = "my name is name picture <img src='/img/pic.a' alt='here first pic'><br/>second pic is here <img src='/img/pic.b' alt='this is the second place'> and the third pic <img src='/img/pic.a' alt='pic 3'> <table><tr><td>first coloumn</td><td>second coloumn</td></tr><tr><td>2first coloumn</td><td>2second coloumn</td></tr></table><br/><p>here is it</p><br><a href='/home'>click here</a>.<br/> end";
var z = x.match(/(<img[^>]+>)/gi);
console.log(z);

$("#strImg").val(z[0]);
document.getElementById('result').innerText = JSON.stringify(z, 0, 4); 
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<input id="strImg" size=50>

<br /><br />
<hr />
All Images:
<pre id="result"></pre> 
  
 
You can extract by using the regex.
 
/(<img[^>]+>)/gi
 
Regex Explanation:
 
 
 (): Capturing group to access the matched result 
 <img: Matches <img literally 
 [^<]+: Matches anything that is not < 
 >: Matches >, end of the image tag 
 gi: g: Global match, i: case-insensitive match 
 
 
 
  
  
var x = "my name is name picture <img src='/img/pic.a' alt='here first pic'><br/>second pic is here <img src='/img/pic.b' alt='this is the second place'> and the third pic <img src='/img/pic.a' alt='pic 3'> <table><tr><td>first coloumn</td><td>second coloumn</td></tr><tr><td>2first coloumn</td><td>2second coloumn</td></tr></table><br/><p>here is it</p><br><a href='/home'>click here</a>.<br/> end";
var z = x.match(/(<img[^>]+>)/gi);
console.log(z);

$("#strImg").val(z[0]);
document.getElementById('result').innerText = JSON.stringify(z, 0, 4); 
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<input id="strImg" size=50>

<br /><br />
<hr />
All Images:
<pre id="result"></pre>