-1

Me and my friend have found many methods online but they are either not compatible with JavaScript's Regular expressions or they never exactly target what we want only targeted or we

keep getting redirected to other confusing posts that end up unhelpful to our code suggested by others but I am

aware that there is already similar posts on here like this but none of them works for us. What I'm trying to do basically is I'm trying to get a set of characters between two sets of characters.

In this case between the url( and ); for example

Example

We are currently testing the expressions and the string on this site

https://www.regextester.com/

so kindly suggest the correct expression for this string without using fancy JavaScript add on codes. We will take care of the JavaScript add on codes our self's. We are just interested in getting a working expression for this string 

style='background-image: url(MATCH TARGET); background-size: cover; background-position: center; background-repeat: no-repeat;'

3 Answers3

1

You can use the regular expression /(?<=\().*(?=\))/.

This does a positive lookbehind on the left bracket and a positive lookahead on the right bracket, matching any character in between the brackets. This can be seen here.

const string = "style='background-image: url(MATCH TARGET); background-size: cover; background-position: center; background-repeat: no-repeat;'";
const regex = /(?<=\().*(?=\))/;

console.log(string.match(regex)[0]);
Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
  • Nice, any advantage of this over my method? +1 – Joe Iddon Oct 28 '18 at 20:24
  • Sadly Obsidian Age we have tried a similar method that involves a look behind but according to https://www.regextester.com/ Lookbehind is not supported in JavaScript I notice it only works on certain browsers like chrome but when it comes to Edge or IE it does not work. I don't mind providing a list on what we had tried already but every time we do that people notice a piece of the expression and they say something like well to make that work here is a post on this or on that rather than directly providing a solution. –  Oct 28 '18 at 20:38
0

You can use the following regular expression:

url\((.*?)\)

Explanation can be found here: https://regex101.com/r/v3EwJl/1.

JavaScript implementation:

/url\((.*?)\)/.exec('background-image: url(MATCH TARGET); background-size: cover; background-position: center; background-repeat: no-repeat;')[1]
//"MATCH TARGET"
Joe Iddon
  • 20,101
  • 7
  • 33
  • 54
  • Closest method on what I'm trying to do purely on expression but according to https://www.regextester.com/ it is highlighting url(MATCH TARGET) I only want to match MATCH TARGET which represent any characters between url( and ) this is what the site is matching https://www.regextester.com/?fam=105649 –  Oct 28 '18 at 21:44
  • Wait I think your method is what I was looking for my bad I misunderstood something I'll come back to you later I think you solved my problem Joe Iddon –  Oct 28 '18 at 22:37
0

I don't know what are these "fancy JavaScript add on codes", but if you're really sure the style attribute will always be in this format, using regex is pretty easy:

background-image: ?url\(([^)]+)\);?

 ? – an optional space (in case you encounter something like background-image:url(…))

[^)]+ – at least one character which is not )

;? – optional semicolon, to match when the background declaration is at the end of style without the semicolon (style="…; background-image: url(…)")

Using it with JS is easy, too:

const fooStyle = "style='background-image: url(MATCH TARGET); background-size: cover; background-position: center; background-repeat: no-repeat;'";
const match = myString.match(/background-image: ?url\(([^)]+)\);?/);
console.log(match[1]); // -> MATCH TARGET

You might want to remove quotes to get the actual URL, in case the style attribute actually contains something like url("MATCH TARGET") or url('MATCH TARGET'):

console.log(match[1].replace(/['"]/g, ""))

However… if you're just trying to get a background URL for some DOM element on your page (and it kinda looks you're doing just that), it might be easier and more robust (see this) to get the actual property using browser APIs, not string parsing.

Let's say the element of interest is <div class="i-got-a-fancy-background" style="…">…</div>:

const element = document.querySelector(".i-got-a-fancy-background")
const elementStyle = element.currentStyle || window.getComputedStyle(element, false),
const elementStyle = style.backgroundImage.slice(4, -1).replace(/"/g, "");

I believe it's pretty clear what this does. The .slice(4, -1) part removes url( and ), and .replace(/"/g, "") removes quotes.

helb
  • 3,154
  • 15
  • 21
  • Thanks for your reply that's what I was talking about I am aiming for a pure expression that can do that job rather than using added JavaScript stuff like for example slice,replace etc... I don't know if this is even possible with the limitations of JavaScript expressions. Since a lot of working solutions works great with methods like look behind etc.. but since certain methods like that is not really supported by JS or on certain browsers that's why I'm here. –  Oct 28 '18 at 21:36