提取字符串的中间或最后部分

Question

I want to extract only the first fontname out of a URL-string from the Google Webfont Directory. Here are some examples of possible strings and what part should be returned:

fonts.googleapis.com/css?family=Raleway              // "Raleway"
fonts.googleapis.com/css?family=Caesar+Dressing      // "Caesar Dressing"
fonts.googleapis.com/css?family=Raleway:300,400      // "Raleway"
fonts.googleapis.com/css?family=Raleway|Fondamento   // "Raleway"
fonts.googleapis.com/css?family=Caesar+Dressing|Raleway:300,400|Fondamento  // "Caesar Dressing"

So sometimes it's just one fontname, sometimes it has a weight indicated by a colon ( : ) and sometimes there are more fontnames divided by a pipe ( | ).

I have tried /family=(\\S*)[:|]/ but it only matches the strings with : or | . I could do it like this, but it's not a nice solution:

var fontUrl = "fonts.googleapis.com/css?family=Caesar+Dressing|Raleway:300,400|Fondamento";
var fontName = /family=(\S*)/.exec(fontUrl)[1].replace(/\+/, " ");
if (fontName.indexOf(':') != -1){
    fontName = fontName.split(':')[0];
}
if (fontName.indexOf('|') != -1){
    fontName = fontName.split('|')[0];
}
console.log(fontName);

Is there a nice regex solution to this?

Answer 1

Instead of matching the character that (might) follow the string you want, match only the string you want except those characters :

/family=([^\s:|]*)/

Alternatively, you'd use a lookahead like this:

/family=(\S*?)(?=$|[:|])/

Answer 2

That should be better:

/family=([^:|]*)/

Of course for the + case, you'll have to replace it afterwards (or before maybe).

Answer 3

尝试这个：

/family\=(\S+?)[\:\|,]{0,2}\S*/ims

Answer 4

You can use (choose the i and m modifier in all case):

family=([a-z]+\+?[a-z]+)

or more simply

family=([a-z+]+)

or to avoid matching the + char:

family=([a-z]+)\+?([a-z]+)?

but it is an easyer way to use the second solution, and to replace the + chars with a space after.

Answer 5

No regex is required in this case, unless you are good with regex's or test them thoroughly then you are likely to make mistakes.

var fontUrls = [];

fontUrls.push("fonts.googleapis.com/css?family=Raleway");
fontUrls.push("fonts.googleapis.com/css?family=Caesar+Dressing");
fontUrls.push("fonts.googleapis.com/css?family=Raleway:300,400");
fontUrls.push("fonts.googleapis.com/css?family=Raleway|Fondamento");
fontUrls.push("fonts.googleapis.com/css?family=Caesar+Dressing|Raleway:300,400|Fondamento");

function getFirstFont(url) {
    return url.split("=")[1].split("|")[0].split(":")[0];
}

fontUrls.forEach(function (fontUrl) {
  console.log(getFirstFont(fontUrl));
});

on jsfiddle