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

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"

所以有时它只是一个字体名称，它也有一个冒号表明其重（ : ），有时有更多fontnames通过管道分（ | ）。

我已经试过/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:|]*)/

或者，您可以使用这样的前瞻 ：

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

在jsfiddle