CODEWITHSUNDEEP
javascriptjquery
akauts
akauts

Reputation: 153

Get a specific tag from a html variable by jquery

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

Upvotes: 1

Views: 91

Answers (3)

Joshua Bakker
Joshua Bakker

Reputation: 2358

No amazing way of doing it, but one way:

$(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;
}

Check jsfiddle:

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

The offset is which img tag you want to get (1 = first, 2 = second etc..) You can also get all image tags first, store in array and then use index to get the images. But with only jQuery I don't think it's possible.

Upvotes: 0

Tushar
Tushar

Reputation: 87203

You can extract by using the regex.

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

Regex Explanation:

  1. (): Capturing group to access the matched result
  2. <img: Matches <img literally
  3. [^<]+: Matches anything that is not <
  4. >: Matches >, end of the image tag
  5. 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>

Upvotes: 2

Danmoreng
Danmoreng

Reputation: 2367

Here you go:

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);

Upvotes: 0

Related Questions