通过jquery从html变量中获取特定的标记

Get a specific tag from a html variable by jquery

本文关键字：获取 jquery html 变量 通过      更新时间：2023-09-26

我有一个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的建议，事情变得更简单了。按照他的建议办事很精细希望对其他人有用

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

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

Regex解释：

  1. ()：捕获组以访问匹配结果
  2. <img：与<img完全匹配
  3. [^<]+：匹配任何非<的内容
  4. >：匹配>，图像标签的末尾
  5. 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>

开始：

http://jsfiddle.net/tsLdorth/

HTML:

<div id="mydiv">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</div>

Javascript：

$("#strImg").val($("#mydiv").children().first()[0].outerHTML);

没有什么了不起的方法，只有一种方法：

$(document).ready(function() {    
    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";
    $("#strImg").val(getImageTag(x, 2));
});

function getImageTag(x, offset) {
    var imgTag = '';
    var raw = x;
    for (i = 0; i < offset; i++) {
        var imgIndex = raw.indexOf('<img');
        var imgEndIndex = raw.substring(imgIndex).indexOf('>');
        imgTag = raw.substring(imgIndex).substring(0, imgEndIndex + 1);
        raw = raw.substring(imgEndIndex + 1);
    }
    return imgTag;
}

检查jsfiddle:

https://jsfiddle.net/JoshB1997/rpjh3yLo/6/

偏移量是您想要获得的img标记（1=第一个，2=第二个等等）您也可以先获取所有的图像标签，存储在数组中，然后使用索引来获取图像。但我认为只有jQuery是不可能的。

相关文章：