1

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"

そのため、フォント名が 1 つだけの場合もあれば、コロン ( :) で示される太さがある場合もあれば、パイプ ( |) で分割された複数のフォント名がある場合もあります。

試してみましたが、または/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解決策はありますか？

4

5 に答える 5

0

使用できます（すべての場合に i および m 修飾子を選択してください）：

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

またはもっと簡単に

family=([a-z+]+)

または + 文字の一致を避けるには:

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

ただし、2 番目の解決策を使用して + 文字をスペースに置き換える方が簡単です。

于 2013-04-23T15:29:50.253 に答える
0

この場合、正規表現は必要ありません。正規表現に精通しているか、完全にテストしていない限り、間違いを犯す可能性があります。

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で

于 2013-04-23T15:31:00.780 に答える