I am trying to get the value of the backgound-image url. The url is set inline directly in the element tag with the style attribute like so
<a style="background-image: url(https:// ....)"></a>
I tried doing
var url = $(this).css('background-image')
with various regexes but it does not seem to work. I am trying to store this URL into MongoDB but I get this error
var styles = parse(el.attribs.style);
TypeError: Cannot read property 'attribs' of undefined
Get the style value, then strip the URL from it
var bi = $('a').css("background-image");
alert(bi.split(/"/)[1]);
The call to jQuery .css("background-image") always returns the URL within double quotes, regardless how it was set originally.
Sample fiddle:
https://jsfiddle.net/6qk3ufcb/
In vanilla JS, having full DOM access, it can be done like so:
document.querySelector('a').style.backgroundImage.split('"')[1]
Or, if for whatever reason you don't have DOM access (for example dealing in node, and operating on some simplified HTML parser) it can also be done with regexp:
const htmlString = `<div class="bg-div" style="background-image: url('https://loremipsum.com/imageIpsum.jpg');">`
const reg = /url.'([\w\W]+?)'/;
const searched = reg.exec(htmlString)
console.log(searched[1]) //=> https://loremipsum.com/imageIpsum.jpg
Related
Trying to open a picture in a new tab, the values comes from a looping object.
How will I pass the value of doc.strDocument to onClick ?
PUG:
a(onClick="window.open('/userImages/documents/'+doc.strDocument);")
HTML:
<a onClick="window.open('/userImages/documents/'+doc.strDocument);"></a>
Your concatenation is fine (as long as strDocument has a value that when concatenated with the static text forms a valid URL).
But, this is much simpler when it comes to <a> elements - no onclick needed because <a> elements can target new windows with the target attribute.
function getLink(){
var someData = "foo";
return "some/path/" + someData;
console.log(link.href);
}
test
And, even that should be improved by moving the JavaScript out from being inline with the HTML:
var someDynamicallyGottenValue = "foo";
var link = document.getElementById("dynamicLink");
link.href = 'http://someDomain.com/' + someDynamicallyGottenValue;
console.log(link.href);
test
You can pass JSON data to Pug.
{"book": {"name": "Dracula"}}
And your PUG code would be,
a(onClick="window.open('/userImages/documents/#{book.name}');")
Pug also support variables.
- var foo = book.name;
a(onClick="window.open('/userImages/documents/#{foo}');")
Tested using - http://naltatis.github.io/jade-syntax-docs/#variables
Hope this helps.
var strHTML = "<div><img src='/fake/path/fakeImage.jpg'/><span id='target'>text to extract</span></div>";
var dom = $(strHTML);
var extractedText = dom.find("#target").text();
alert(extractedText);
When I convert the HTML string to a jQuery object, jQuery makes GET request to retrieve pictures as you can see in the network tab in the developer tools.
JsFiddle
How can I convert a HTML string to jQuery object without downloading any resources from the parsed string ?
Note : jQuery.parseHTML does not return a jQuery object, you cannot use .find() for example.
I don't think this is possible, since its not jQuery (or javascript) that does the image loading but the browser - as soon as a src attribute is set on an img element the browser will attempt to download it.
One thing you can do is change the element name from img to something else before building the dom, or change the src attribute to something else, for example:
// change the <img> elements to <my_img> to avoid image fetching
strHtml = strHtml.replace(/<img /gi, "<my_img ").replace(/<\/img>/gi, "</my_img>");
// or the 2nd alternative: change the src attribute of images
strHtml = strHtml.replace(/<img([^>]*?) src=/gi, "<img$1 my_src=")
// now its safe to parse into DOM - no images will be fetched
var dom = $(strHtml);
note this simple "search and replace" may replace texts other than the elements you want, but it may be sufficient for your use case.
You can feed it through $.parseXML first:
var strHTML = "<div><img src='/fake/path/fakeImage.jpg'/><span id='target'>text to extract</span></div>";
var dom = $($.parseXML(strHTML));
var extractedText = dom.find("#target").text();
alert(extractedText);
I don't know if it is answered already before. I don't know what to search for.
All I want to know is if there is a jquery function for the following problem.
Let's say I have an URL string like this - www.example.com/a/b/../c
I want to get www.example.com/a/c
One simple way is to create a link element, set its href property, and then read it.
var a = document.createElement("a");
a.href = "http://www.example.com/a/b/../c";
var resolved = a.href;
console.log(resolved); // "http://www.example.com/a/c"
Or using some jQuery:
var resolved = $("<a>").prop("href", "http://www.example.com/a/b/../c").prop("href");
console.log(resolved); // "http://www.example.com/a/c"
Live Example
This works relative to the current document's path, although with the URL above it doesn't matter as the URL is absolute.
Note that it's important that we're using the reflected property, not the attribute, here.
I have a link like :
<a rel="Test Images" class="thickbox preview_link" href="http://www.localhost.com:8080/testwp/wp-content/uploads/2013/12/2013-10-02_1728.png">
i need to get the url of that image inside a javascript file loaded on the same page.
i tried something like:
image_src = jQuery('a[class=thickbox preview_link]').attr('href');
but all i get is Uncaught Error: Syntax error, unrecognized expression: a[class=thickbox preview_link] in the console.
i am using jquery 1.10.2 on the site
You would do:
jQuery('a.thickbox.preview_link').attr('href');
Your attribute selector syntax is incorrect since it has space you need to wrap them in quotes ('a[class="thickbox preview_link"]'), but you can always use class selector which would be mostly faster than the attribute selector and the order doesn't matter as well.
Just in case you need it, here's the vanilla Javascript version
Get the image(s)
var image = document.getElementsByClassName('thickbox preview_link');
Getting the href (of the first image)
var image_href = image[0].getAttribute('href');
Better version
// Declare the image_href variable
var image_href;
// Getting a nodeList of all the applicable images
var image = document.getElementsByClassName('thickbox preview_link');
// If there's only 1 image and/or you only want the first one's href
if(image[0] !== undefined) {
// if condition to check whether or not the DOM has the images in the first place
// if yes, update the image_href variable with the href attribute
image_href = image[0].getAttribute('href');
}
Best of luck!
thickbox preview_link is actually 2 class tokens, so you're looking for a.thickbox.preview_link or (for that specific attribute) a[class="thickbox preview_link"] (notice the quotes)
image_src = jQuery('a.thickbox.preview_link').attr('href');
// or
image_src = jQuery('a[class="thickbox preview_link"]').attr('href');
I tried to use the method data (jQuery 1.7.1) in this code:
var q = '<div class="form-error-marker"></div>';
var t = $(q).data('message', message).insertAfter(el);
and it does not work.
Note that this works:
var t = $(q).attr('data-message', message).insertAfter(el);
Why does the first variant not work?
EDIT: insertAfter works correctly and new div is added after el (which is instance of one element which I get by getElementById() function; long story short I have a library that I extend).
When I say 'it does not work' I mean that the attribute 'data-message' is not stored.
Using data like that sets an arbitrary piece of data for this node; it doesn't add a new data- attribute. Just add the attribute with the attr function, and then access it with data
var q = $('<div class="form-error-marker"></div>').attr("data-message", message);
Now access it like this:
var message = q.data("message");
Here's a fiddle
When you use jQuery.data you don't change element attributes, instead your data saved in $.cache.
So if you want to change element attributes use jQuery.attr, when you want to save some info use jQuery.data