Question

我想从Google Webfont目录中仅提取URL字符串中的第一个字体名称。以下是可能字符串的一些示例以及应返回的部分：

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"

因此，有时它只是一个字体名称，有时它的冒号由冒号（:）表示，有时候有更多的字体名称被管道（|）划分。

我已尝试/family=(\S*)[:|]/，但它只匹配:或|的字符串。我可以这样做，但这不是一个很好的解决方案：

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);

对此有一个很好的regex解决方案吗？

Answer 1

不是匹配（可能）跟随你想要的字符串的字符，而只匹配你想要的字符串除了那些字符：

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

或者，你可以使用这样的lookahead：

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

Answer 2

那应该更好：

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

当然对于+案例，你必须在之后（或之前）更换它。

Answer 3

试试这个：

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

Answer 4

您可以使用（在所有情况下选择i和m修饰符）：

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

或更简单

family=([a-z+]+)

或避免匹配+ char：

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

但这是一种更简单的方法来使用第二种解决方案，并用后面的空格替换+字符。

Answer 5

在这种情况下不需要正则表达式，除非你对正则表达式有好处或者彻底测试它们，否则你可能会犯错误。

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

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

5 个答案: