Obtain the value of the background image's URL

Is there a way to extract the value of the background-image URL that is set directly in the element tag using inline styling?

<a style="background-image: url(https:// ....)"></a>

I attempted to retrieve this information using

var url = $(this).css('background-image')

and tried various regex patterns, but unfortunately, it did not work as expected. I am looking to save this URL into MongoDB, however, when I attempt to execute the following code, I encounter an error:

var styles = parse(el.attribs.style);
TypeError: Cannot read property 'attribs' of undefined

javascriptjqueryhtmlcssmongodb

Answer №1

Extract the URL from a style value

var backgroundImage = $('a').css("background-image");
alert(backgroundImage.split(/"/)[1]);

When using jQuery's .css("background-image") method, it will always return the URL enclosed in double quotes, regardless of how it was originally set.

Check out this sample fiddle: https://jsfiddle.net/6qk3ufcb/

Answer №2

If you're working in vanilla JavaScript and have complete access to the DOM, achieving this can be accomplished as follows:

document.querySelector('a').style.backgroundImage.split('"')[1]

However, if you find yourself in a situation where you lack direct DOM access (such as when working with Node.js and manipulating simplified HTML), you can also achieve the same result using regular expressions:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble exporting a static HTML file using Next.js

https://i.stack.imgur.com/xQj7q.pngI'm a beginner in the world of React. Recently, I completed a project where I utilized "next build && next export" in my package.json file for static HTML export. By running the npm run build command, an out folder w ...

javascriptreactjsnext.js

"How can I make a dropdown open and close when a button is clicked, but also close when clicking outside of it at the same

One button click opens a dropdown, and it also closes when clicked outside. toggleAllCategories() { this.setState({ isOpenAllCategories: !this.state.isOpenAllCategories }); } The issue arises when attempting to open and close the dropdown by clic ...

javascripthtmlreactjs

Issue encountered while transferring data for populating table content with Material-ui

Could you assist me with a problem I'm encountering? I have created a component to display the information from an array, consisting of both index.js and TableData.js files. However, when attempting to transfer the array data from index.js to TableDat ...

javascriptreactjs

Utilizing Restangular to refine search results with filters

I need help troubleshooting an issue with my Restangular query. Despite trying various methods, I am unable to retrieve filtered data successfully. Here are the different approaches I have attempted: $scope.welcomes = Restangular.all("projects").getList({ ...

javascriptnode.jsangularjsmongodbrestangular

The URL routing in Vue-router seems to be incorrect as it directs to the wrong page. To fix this issue, make sure to include a '#' before the

Welcome to my website! Check out my home page here: https://i.sstatic.net/znfq0.jpg If you're interested in reading my blog, visit the blog page here: https://i.sstatic.net/oiYSY.png I've built this site using vue3. Here's a snippet of th ...

javascriptvue.jsvue-routervuejs3vue-router4

Can a software be created to capture search results from the internet?

Is it feasible to create a program that can extract online search results? I am specifically interested in retrieving data from Some of the data I need include application numbers, such as 9078871 and 10595401 Although there are CAPTCHAs present, I am w ...

javascriptc++pythondatabase

Exploring the Benefits of Utilizing External APIs in Next JS 13 Server-side Operations

Can someone provide more detail to explain data revalidation in Next JS 13? Please refer to this question on Stack Overflow. I am currently utilizing the new directory features for data fetching in Next JS 13. According to the documentation, it is recomme ...

javascriptreactjsnext.jsreact-query

Having trouble showcasing two unordered lists side by side on a single line

In my Magento Go store, I am showcasing products using CSS only. Currently, the loop is set to display 5 products in a row and then close the <ul> tag. However, if there are more products, a new <ul> element is created. My fixed width only allo ...

htmlcss

How to Override package.json Scripts in NPM

Is it possible to modify package.json scripts without changing the original file? I need to customize the memory allocation for a specific step, but altering the package.json will affect everyone. For example, our current script is: "script": { "dev": ...

javascriptnode.jsnpmyarnpkgnpm-scripts

Tips for aligning images directly alongside text without any separation

I'm currently learning html and facing some challenges with coding my own blog page. My main issue is trying to design a section that leads to the latest post, but I can't seem to get the layout right. I envision having the text and image neatl ...

htmlcssimagecss-float

Encountering an error: "Unhandled promise rejection SyntaxError: Unexpected character in JSON data at line 1 column 1."

When the submit button is clicked, my registration form data is sent using an event function called postData() in React. The user data is sent at the register route, and I have mentioned line numbers in the comments: const postData = async(event) =>{ ...

javascriptjsonreactjsexpressmern

I wish to remove every item except for the one belonging to the current user

I'm writing a function to delete all users except for the currently logged-in user. Take a look at my code: exports.deletealluser = async (req, res) => { try { const { sub } = req.user; const usersExceptCurrent = await User.fi ...

node.jsreactjsmongodbexpressmongoose

What is the most effective way to stop zooming when focusing on form fields on iOS or similar devices when using font sizes of 16px or lower?

It appears that many proposed solutions involve changing the text to 16px or using JavaScript to determine if the phone is an iPhone. However, altering the style may not be the most practical solution and checking for specific devices like iPhones could ...

javascriptioscssinputzooming

What is the best way to align columns after adding or deleting columns in an el-table using Element UI in Vue.js?

Is there a way to develop a table/datagrid using Element UI that allows users to choose which columns are displayed? I've already made an attempt, and you can find it here. I'm also looking for a solution that enables users to adjust the width o ...

javascriptvue.jsrenderingelement-ui

Utilizing jquery.validate.min.js for efficient form validation

Here is my JavaScript validate function: $("form[id='form']").validate({ Name: "required", submitHandler: function() { formSubmit(); } }); Not only do I wa ...

javascriptjqueryjquery-validate

Is TypeScript being converted to JavaScript with both files in the same directory?

As I begin my journey with TypeScript in my new Angular project, I find myself pondering the best approach for organizing all these JS and TS files. Currently, it appears that the transpiler is placing the .js files in the same directory as the correspondi ...

javascripttypescript

I'm looking for a way to set up a PropType that accepts a boolean value, but also allows for

Currently, my code includes a Modal component with a prop called disableEscapeKeyDown. The PropType defines it as boolean | null, but when trying to use it in the ModalWindow function, I receive an error stating Type 'boolean | null' is not assig ...

javascriptmaterial-uireact-proptypes

What is the process for converting/executing TypeScript into JavaScript?

Having trouble running https://github.com/airgram/airgram Encountering this warning message from the post (node:9374) Warning: To load an ES module, set "type": "module" Have already added {"type": "module"} To pa ...

javascriptnode.jstypescriptnode-modules

Divide the string into segments and set up pagination

<div><p class="pagi">page 1 content</p><p class="pagi">page 2 content</p><p class="pagi">page 3 content</p></div> I am currently facing a challenge with the string provided above. I need to create pagination ...

javascriptjqueryhtml

I am having trouble getting my textarea to accept width attributes

Strangely, the text area on my website just won't cooperate with the width I specify. I've double-checked the CSS multiple times to no avail! Take a look at this jsfiddle example that demonstrates what I'm trying to achieve. However, on my ...

htmlcsstextarea