JavaScript regexp parsing an array of URLs - javascript

String
url(image1.png), url('image2.png'), url("image3.png")
Note the ' and " delimiters. It would be nice to handle them as well, but I'm happy if the first form is captured.
Result
var results = 'image1.png', 'image2.png', 'image3.png';
How?
I would like to use regular expressions in javascript to parse a string that is used as the CSS property of an element with multiple backgrounds. The aim is to get the url of the images that are put in the background of the element using CSS.
See more: http://www.css3.info/preview/multiple-backgrounds/
JSFiddle
http://jsfiddle.net/fcx9x59r/1/

For this particular string [^'"()]+(?=['")]) seems to work fine:
css = "url(image1.png), url('image2.png'), url(\"image3.png\")";
m = css.match(/[^'"()]+(?=['")])/g)
document.write(m)
In the general case, you have to resort to a loop, because JS doesn't provide a way to return all matching groups from a single call:
css = "url(image1.png), something else, url('image2.png'), url(\"image3.png\")";
urls = []
css.replace(/url\(['"]*([^'")]+)/g, function(_, $1) { urls.push($1) });
document.write(urls)

/url\(([^"']+?)\)|'([^'"]+?)'\)|"([^'"]+?)"\)/g
Try this.Grab the captures.See demo.
http://regex101.com/r/qQ3kG7/1

You could try the below code also.
> var s = 'url(image1.png), url(\'image2.png\'), url("image3.png")';
undefined
> var re = /url\((["'])?((?:(?!\1).|[^'"])*?)\1\)/g;
undefined
> var matches = [];
undefined
> var m;
undefined
> while ((m = re.exec(s)) != null) {
......... matches.push(m[2]);
......... }
3
> console.log(matches)
[ 'image1.png', 'image2.png', 'image3.png' ]
DEMO

Try this:
var results = str.match(/url\(['"]?[^\s'")]+['"]?\)/g)
.map(function(s) {
return s.match(/url\(['"]?([^\s'")]+)['"]?\)/)[1];
});
Demo

Related

Matching escaped spaces using JavaScript indexOf

I have the following JavaScript code:
var matchArray = [];
var passedUrl = '/' + url;
var tabLink;
$('.uiAjaxTabs li a').each(function () {
if (passedUrl.indexOf($(this).attr('href')) == 0) {
boverlap_penalty = passedUrl.replace($(this).attr('href'), '').length;
matchArray.push({ 'score': boverlap_penalty, 'dom_obj': this });
}
});
if (matchArray.length) {
tabLink = matchArray.sort(function (a, b) {
return (a.score < b.score) ? -1 : 1
}).shift().dom_obj;
}
$(tabLink).parents('li').addClass('loading');
Which takes a passedUrl and then matches it up with a set of links to see which most closely matches the url, and then adds a class of loading to it.
This works fine EXCEPT if the link has a space in it e.g. domain.com/People?Name=John Doe because the browser sees it as domain.com/People?Name=John%20Doe and therefore doesn't match it correctly when the passedUrl has the escaped spaces and the link does not.
Any ideas on how to fix this?
Any ideas on how to fix this?
Use
var passedUrl = decodeURI('/' + url);
See MDN docs.
Try JavaScript's unescape function, it seem to decode URL-encoded strings.

regex to find a string that comes after =

I´m really new to regex and I have been looking around to find an answer but either it dont work or I get some kind of error so I will try to ask the question and hopefulyl somebody can guide me through it :)
I have a string that can look like this:
str = "car[brand=saab][wheels=4]"
I have no idea if you can get several different matches directly or if you need different .match() but anyhow.
I need everything before the first [] in 1 variable.
Then i need saab in another, and 4 in a third.
.replace with a callback function is your tool of choice when parsing custom formats in javascript. Consider:
parse = function(s) {
var result = {};
s.replace(/^(\w+)|\[(.+?)=(.+?)\]/g, function($0, $1, $2, $3) {
result[$2 || "kind"] = $1 || $3;
});
return result;
}
Example:
str = "car[brand=saab][wheels=4][price=1234][morestuff=foobar]"
console.log(parse(str))
// {"kind":"car","brand":"saab","wheels":"4","price":"1234","morestuff":"foobar"}
You can use this regex:
([^\[]*)\[[^=]+=([^\]]*)\]\[[^=]+=([^\]]*)\]
You can then grap matching group #1, #2 and #3
Live Demo: http://www.rubular.com/r/XNZfHcMAp8
In Javascript:
str = 'car[brand=saab][wheels=4]';
console.log('match::' + str.match(/([^[]*)\[[^=]+=([^\]]*)\]\[[^=]+=([^\]]*)\]/));
I think this should work :
([^[]+)(?:\[[^=]+=([^\]]+)\])+
Explainations :
([^[]) First, you match everything that is not a [.
(?:...)+ Then, when you find it, you're starting repeting a pattern
\[[^=] Find everything that is not an =, and discard it.
([^\]]) Find everything that is not a ] and capture it.
/([^\[]+)\[brand=([^\]]+)\]\[wheels=(\d)\]/
Works.
Try it like
var result = "car[brand=saab][wheels=4]".match(/([^\[]+)\[brand=([^\]]+)\]\[wheels=(\d)\]/)
Result would be
[ "car[brand=saab][wheels=4]", "car", "saab", "4" ]
you could do it with match in one shot, and get an array back.
below lines were tested in chrome console:
str = "car[brand=saab][wheels=4]";
"car[brand=saab][wheels=4]"
str.match(/[^=[\]]+(?=[[\]])/g)
["car", "saab", "4"]
function getObject(str) {
var props = str.split(/\[(.*?)\]/g),
object = {};
if (props.length) {
object.name = props.shift();
while (props.length) {
var prop = props.shift().split("=");
if(prop.length == 2){
object[prop[0]] = prop[1];
}
}
}
return object;
}
console.log(getObject("car[brand=saab][wheels=4]"));

javascript get string before a character

I have a string that and I am trying to extract the characters before the quote.
Example is extract the 14 from 14' - €14.99
I am using the follwing code to acheive this.
$menuItem.text().match(/[^']*/)[0]
My problem is that if the string is something like €0.88 I wish to get an empty string returned. However I get back the full string of €0.88.
What I am I doing wrong with the match?
This is the what you should use to split:
string.slice(0, string.indexOf("'"));
And then to handle your non existant value edge case:
function split(str) {
var i = str.indexOf("'");
if(i > 0)
return str.slice(0, i);
else
return "";
}
Demo on JsFiddle
Nobody seems to have presented what seems to me as the safest and most obvious option that covers each of the cases the OP asked about so I thought I'd offer this:
function getCharsBefore(str, chr) {
var index = str.indexOf(chr);
if (index != -1) {
return(str.substring(0, index));
}
return("");
}
try this
str.substring(0,str.indexOf("'"));
Here is an underscore mixin in coffescript
_.mixin
substrBefore : ->
[char, str] = arguments
return "" unless char?
fn = (s)-> s.substr(0,s.indexOf(char)+1)
return fn(str) if str?
fn
or if you prefer raw javascript : http://jsfiddle.net/snrobot/XsuQd/
You can use this to build a partial like:
var beforeQuote = _.substrBefore("'");
var hasQuote = beforeQuote("14' - €0.88"); // hasQuote = "14'"
var noQoute = beforeQuote("14 €0.88"); // noQuote = ""
Or just call it directly with your string
var beforeQuote = _.substrBefore("'", "14' - €0.88"); // beforeQuote = "14'"
I purposely chose to leave the search character in the results to match its complement mixin substrAfter (here is a demo: http://jsfiddle.net/snrobot/SEAZr/ ). The later mixin was written as a utility to parse url queries. In some cases I am just using location.search which returns a string with the leading ?.
I use "split":
let string = "one-two-three";
let um = string.split('-')[0];
let dois = string.split('-')[1];
let tres = string.split('-')[2];
document.write(tres) //three

Javascript to extract *.com

I am looking for a javascript function/regex to extract *.com from a URI... (to be done on client side)
It should work for the following cases:
siphone.com = siphone.com
qwr.siphone.com = siphone.com
www.qwr.siphone.com = siphone.com
qw.rock.siphone.com = siphone.com
<http://www.qwr.siphone.com> = siphone.com
Much appreciated!
Edit: Sorry, I missed a case:
http://www.qwr.siphone.com/default.htm = siphone.com
I guess this regex should work for a few cases:
/[\w]+\.(com|ca|org|net)/
I'm not good with JavaScript, but there should be a library for splitting URIs out there, right?
According to that link, here's a "strict" regex:
/^(?:([^:\/?#]+):)?(?:\/\/((?:(([^:#]*)(?::([^:#]*))?)?#)?([^:\/?#]*)(?::(\d*))?))?((((?:[^?#\/]*\/)*)([^?#]*))(?:\?([^#]*))?(?:#(.*))?)/
As you can see, you're better off just using the "library". :)
This should do it. I added a few cases for some nonmatches.
var cases = [
"siphone.com",
"qwr.siphone.com",
"www.qwr.siphone.com",
"qw.rock.siphone.com",
"<http://www.qwr.siphone.com>",
"hamstar.corm",
"cheese.net",
"bro.at.me.come",
"http://www.qwr.siphone.com/default.htm"];
var grabCom = function(str) {
var result = str.match("(\\w+\\.com)\\W?|$");
if(result !== null)
return result[1];
return null;
};
for(var i = 0; i < cases.length; i++) {
console.log(grabCom(cases[i]));
}
var myStrings = [
'siphone.com',
'qwr.siphone.com',
'www.qwr.siphone.com',
'qw.rock.siphone.com',
'<http://www.qwr.siphone.com>'
];
for (var i = 0; i < myStrings.length; i++) {
document.write( myStrings[i] + '=' + myStrings[i].match(/[\w]+\.(com)/gi) + '<br><br>');
}
I've placed given demo strings to the myStrings array.
i - is index to iterate through this array. The following line does the matching trick:
myStrings[i].match(/[\w]+\.(com)/gi)
and returns the value of siphone.com. If you'd like to match .net and etc. - add (com|net|other) instead of just (com).
Also you may find the following link useful: Regular expressions Cheat Sheet
update: missed case works too %)
You could split the string then search for the .com string like so
var url = 'music.google.com'
var parts = url.split('.');
for(part in parts) {
if(part == 'com') {
return true;
}
{
uri = "foo.bar.baz.com"
uri.split(".").slice(-2).join(".") // returns baz.com
This assumes that you want just the hostname and tld. It also assumes that there is no path information either.
Updated now that you also need to handle uris with paths you could do:
uri.split(".").slice(-2).join(".").split("/")[0]
Use regexp to do that. This way modifications to the detections are quite easy.
var url = 'www.siphone.com';
var domain = url.match(/[^.]\.com/i)[0];
If you use url.match(/(([^.]+)\.com)[^a-z]/i)[1] instead. You can assure that the ".com" is not followed by any other characters.

JavaScript indexOf to ignore Case

I am trying to find if an image has in its source name noPic which can be in upper or lower case.
var noPic = largeSrc.indexOf("nopic");
Should I write :
var noPic = largeSrc.toLowerCase().indexOf("nopic");
But this solution doesn't work...
You can use regex with a case-insensitive modifier - admittedly not necessarily as fast as indexOf.
var noPic = largeSrc.search(/nopic/i);
No, there is no case-insensitive way to call that function. Perhaps the reason your second example doesn't work is because you are missing a call to the text() function.
Try this:
var search = "nopic";
var noPic = largeSrc.text().toLowerCase().indexOf(search.toLowerCase());
Note that if the search string is from user input you'll need to escape the special regexp characters.
Here's what it would look like:
var search = getUserInput();
/* case-insensitive search takes around 2 times more than simple indexOf() */
var regex = RegExp(search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), "i");
var noPic = testString.search(regex);
See the updated jsperf: http://jsperf.com/regex-vs-tolowercase-then-regex/4
footnote: regexp escaping from https://stackoverflow.com/a/3561711/1333402
Try with:
var lowerCaseLargeSrc = largeSrc.toLowerCase();
var noPic = lowerCaseLargeSrc.indexOf("nopic");
Your code will only work if largeSrc is already a string. You might be getting an input that's an html element instead. So, use jQuery to resolve any potential input element into the text that's inside it. Example:
var noPic = largeSrc.text().toLowerCase().indexOf("nopic");
How about using findIndex instead that way you can do all your toLowerCase() inside the callback. Worked great for me:
// Not Supported in IE 6-11
const arr = ['HELLO', 'WORLD'];
const str = 'world';
const index = arr.findIndex(element => {
return element.toLowerCase() === str.toLowerCase();
});
console.log(index); // 👉️ 1
if (index !== -1) {
// 👉️ string is in the array
}
Credit:
https://bobbyhadz.com/blog/javascript-make-array-indexof-case-insensitive

Categories

Resources