i have html DOM like this i want to grab image url.
<img src="constant/spacer.gif" style="background-image:url(https://example1.com/image/image1.png);" class="images-thumb">
<img src="constant/spacer.gif" style="background-image:url(https://example2.com/image/image1.png);" class="images-thumb">
my expected output: ["https://example1.com/image/image1.png","https://example1.com/image/image1.png"];
right now i'm using this code
arr = [];
$('.images-thumb').each(function(){
arr.push($(this).attr('style')); // furthur i don't know
});
console.log(arr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<img src="" style="background-image:url(https://example1.com/image/image1.png);" class="images-thumb">
<img src="" style="background-image:url(https://example2.com/image/image1.png);" class="images-thumb">
Furthur i don't know how to exactly grab
["https://example1.com/image/image1.png","https://example1.com/image/image1.png"];
please help me thanks in advance
You could do:
url = url.replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
This will remove url(' and url(" from the beginning of the string if it is present and ") resp. ') from the end.
arr = [];
$('.images-thumb').each(function(){
var $style = $(this).attr('style');
var $url = $style.replace(/^background-image:url\(["']?/, '').replace(/["']?\)$/, '').replace(/\)/, '');
arr.push($url); // further know you know :-P
});
console.log(arr);
You can simply use
var images = document.querySelectorAll('.images-thumb');
var image, arr=[];
for(var i=0; i<images.length;i++){
image = window.getComputedStyle(images[i]).backgroundImage;
arr.push(image.substr(5, image.length-7));
}
console.log(arr);
Pure JS method to grab all the styles of the element.
You can give the image path in src attribute, otherwise the script will be like below
arr = [];
$('.images-thumb').each(function(){
var txt = $(this).attr('style');
first = txt.indexOf('(');
second = txt.indexOf(')');
arr.push(txt.substr(first+1,second-first-1));
});
console.log(arr);
Just check once
Replace the unwanted text with empty string "" :
Example snippet:
arr = [];
$('.images-thumb').each(function() {
arr.push($(this).css("background-image").replace("url(\"", "").replace("\")", ""));
});
console.log(arr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<img src="" style="background-image:url(https://example1.com/image/image1.png);" class="images-thumb">
<img src="" style="background-image:url(https://example2.com/image/image1.png);" class="images-thumb">
You can use JQuery css("background-image") selector and regular expression to get the desired result.
arr = [];
$('.images-thumb').each(function(){
arr.push($(this).css("background-image").replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, ''));
});
console.log(arr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<img src="" style="background-image:url(https://example1.com/image/image1.png);" class="images-thumb">
<img src="" style="background-image:url(https://example2.com/image/image1.png);" class="images-thumb">
Related
<p>hello how are u</p><p> </p>
<div class="fbphotobox"><img id="img__kw_field_id"
fbphotobox-src=" Uploads/Images/OriginalImages/developer_635647972105434266.jpg;"
src="Uploads/Images/ResizedImages/developer_635647972105434266.jpg" alt="" /></div>
This is my string i need to remove the ; from .fbphotobox src i am trying filter() but I am not getting this in my code
var text = $("#<%=hdnDescription.ClientID%>").val();
var found = text.filter(".fbphotobox");
I would recommend you to fix it on server side.
However you can use,
$(document).ready(function() {
//Read attribute and replace text
$('#img__kw_field_id').attr('fbphotobox-src', function(){
return $(this).attr('fbphotobox-src').replace(";","");
});
alert($('#img__kw_field_id').attr('fbphotobox-src'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="img__kw_field_id" fbphotobox-src=" Uploads/Images/OriginalImages/developer_635647972105434266.jpg;" src="Uploads/Images/ResizedImages/developer_635647972105434266.jpg" alt="" />
try something like this:
var text = "hello; dafsdf sd sdf sdf sdf dsf!";
var result = text.replace(";", "");
try using
var text = $("#<%=hdnDescription.ClientID%>").val();
var found = text.replace(";","");
hope it helps.
I have an element on the form:
<img src="/media/BodyPart_7d0cf57e-a461-44fd-903f-ce77b005e299/300/0" class="media-item">
I want to extract the Bodypart_xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
Here ix the mask of the string "/{anyt-ext-here}/BodyPart_xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/{any-number-here}/{any-number-here}"
What is the best day of doint it?
Something like that:
var output= document.querySelector("#output");
var img= document.querySelector(".media-item"); //assuming there is only the wanted img of this class
var extracted_string= img.src.match(/BodyPart[^\/]*/);
if( extracted_string )
output.innerHTML= extracted_string;
else
output.innerHTML= "no match found";
<img src="/media/BodyPart_7d0cf57e-a461-44fd-903f-ce77b005e299/300/0" class="media-item">
<div id="output"></div>
Try utilizing .split() , .filter()
var img = document.querySelectorAll("img[src*=BodyPart]")[0];
var res = img.src.split("/").filter(function(src, i) {
return /BodyPart/.test(src)
})[0];
console.log(res);
<img src="/media/BodyPart_7d0cf57e-a461-44fd-903f-ce77b005e299/300/0" class="media-item">
Try this code:
var input = "<img src=\"/media/BodyPart_7d0cf57e-a461-44fd-903f-ce77b005e299/300/0\" class=\"media-item\">";
var matches = input.match(/^<img src=.*\/(BodyPart\_\w{8}\-\w{4}\-\w{4}\-\w{4}\-\w{12})\//);
alert(matches[1]);
Output:
BodyPart_7d0cf57e-a461-44fd-903f-ce77b005e299
My Random Number Generate code is
var randomnumber=Math.floor(Math.random()*99999)
Now I want to put this variable output in a image scr url..
Here is my url
<img src="http://www.myexample.com/get/image.php?vcid=14851&t=481" alt="" id="imge"/>
So what will my code?
<img src="http://www.myexample.com/get/image.php?vcid='+ randomnumber +'&t=481" alt="" id="imge"/>
??
Please help me
In pure Javascript you could do it like
var randomNumber = 1;
var image = document.getElementById("imageId");
var imageSrc = image.getAttribute("src");
image.setAttribute("src", imageSrc + randomNumber);
To put your number at the correct place you could use some string split functions, but since the order of query strings don't matter you should just put your vcid query at the end.
Try adding this in your <script>:
document.getElementById("imge").src = "http://www.myexample.com/get/image.php?vcid=" + randomnumber + "&t=481";
I'd personally suggest:
var img = document.getElementById('imge');
img.src = img.src.replace(/vcid=(\d+)/, function(){
return randomnumber=Math.floor(Math.random()*99999);
});
// purely to see the src has been changed, this is *not* relevant or required
img.title = img.src;
<img src="http://www.myexample.com/get/image.php?vcid=14851&t=481" alt="" id="imge"/>
References:
JavaScript Regular Expressions.
String.replace().
Here's my code (what I'm stuck on is after the jump)
<script language="JavaScript" type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
var countThisMany = 4; //how many data-id's I want to count per "section" of images
var finalString = ""; //blank var to be used later, must be defined here.
</script>
<img src="foo.jpg" data-id="id1" data-item="1" /> // just a bunch
<img src="foo.jpg" data-id="id2" data-item="2" /> // of images with
<img src="foo.jpg" data-id="id3" data-item="3" /> // data-* usage to
<img src="foo.jpg" data-id="id4" data-item="4" /> // store two bits
<img src="foo.jpg" data-id="id5" data-item="5" /> // of information
<img src="foo.jpg" data-id="id6" data-item="6" /> // that I'll need
<img src="foo.jpg" data-id="id7" data-item="7" /> // to extract
<img src="foo.jpg" data-id="id8" data-item="8" /> // later on below.
<img src="bar.jpg" data-id="id9" data-item="1" /> // another set of images
<img src="bar.jpg" data-id="id10" data-item="2" />
<img src="bar.jpg" data-id="id11" data-item="3" />
<img src="bar.jpg" data-id="id12" data-item="4" />
<img src="bar.jpg" data-id="id13" data-item="5" />
<img src="bar.jpg" data-id="id14" data-item="6" />
<img src="bar.jpg" data-id="id15" data-item="7" />
<img src="bar.jpg" data-id="id16" data-item="8" />
<script type="text/javascript">
var item_array = $("img").map(function() {
return $(this).attr("data-item");
}).get();
//alert(item_array);
//returns "1,2,3,4,5,6,7,8,1,2,3,4,5,6,7,8"
var id_array = $("img").map(function() {
return $(this).attr("data-id");
}).get();
//alert(id_array);
//returns "id1,id2,id3,id4,id5,id6,id7,id8,id9,id10,id11,id12,id13,id14,id15,id16"
for (i=0;i<countThisMany;i++){
finalString=finalString+id_array[i]+';';
}
//alert(finalString);
//returns "id1;id2;id3;id4" -- could be more or less if "countThisMany" is changed to something other than 4
</script>
This entire code is self-contained so feel free to save it as an HTML and uncomment the alerts to see the results.
What I need, however, is a step further. I would like to only collect the data-id of the img tags whose data-item are less than or equal to the variable countThisMany
So the end result of finalString would be "id1;id2;id3;id4;id9;id10;id11;id12". And if countThisMany was changed to 2, for instance, it would be "id1;id2;id9;id10"
I feel as though I am so close but I can't figure out how to only gather the first 4 of the first set of 8 images, and the first 4 of the second set of 8 images. Again, the total amount of images and how many I would need to capture vary, hence the "countThisMany' var.
This is my first post to the amazing stackoverflow community, so I'm excited! Thanks to all contributors ahead of time!
Use filter method
var item_array = $("img").filter(function() {
return parseInt($(this).data("item")) <= countThisMany;
}).map(function() {
return $(this).data('id');
}).get();
var countThisMany = 4;
var item_array = $("img")
.filter(function() {
return parseFloat( $(this).attr("data-item") ) <= countThisMany;
})
.map(function() {
return $(this).attr("data-id");
})
.toArray(); /* instead of get() */
Note that this will return an array. You seem to want a string, so you might want to call .join(',') on the result.
Use $.grep in combination with $.map. I also added a join to array rather than the loop. fiddle: http://jsfiddle.net/brentmn/5yNbE/5/
var countThisMany = 2;
var finalString = "";
var id_array = $.grep($('img'), function(item) {
return ($(item).data('item') <= countThisMany);
}).map(function(item) {
return $(item).data('id')
});
finalString = id_array.join(';');
If i have "img" element id = "myimg".
Is posible to add link to "img" without edit html page using jQuery
<img id="myimg" src="image.png">
I like to make "myimg" have link like this.
<img id="myimg" src="image.png">
You can use wrap():
$("#myimg").wrap("<a href='test.html'></a>');
or
$("#myimg").wrap($("<a>").attr("href", "test.html"));
or:
var a = $("<a>").attr("href", "test.html");
$("#myimg").wrap(a);
I am not into jQuery. Using Javascript, you can do something like:
var parentEl = document.getElementById("myimg").parentElement;
var imgEl = parentEl.innerHtml;
parentEl.innerHtml = '' + imgEl + '';
$(document).ready(function() {
var src = "linkhere.html";
var a = $("<a/>").attr("href", src);
$("#myimg").wrap(a);
});