JavaScriptでyoutube動画IDを正規表現を使わずに取得する
posted : 2018.05.15
こんにちわ、ma-ya’s CREATE［まーやずくりえいと］です。
以前の記事「埋め込みyoutubeが想像以上に戦犯級だった件」でiframe動画（youtube）の遅延読み込み＆初期表示を動画サムネイル（画像）化という方法を紹介しました。
その中で動画IDは正規表現を用いて取得してましたが、もっと手軽に動画IDを取得するTipsを一つ。
動画IDを正規表現ではなく「.sprit()」で取得する
youtubeの動画IDは現在、11桁の英数字・ハイフン・アンダースコアで生成されています。
大体は英数字のみで構成されているものの、たまにハイフンとアンダースコアが混じるみたいですね。
将来的にIDの桁数や使用される記号の種類が増えた場合、正規表現でIDを取得しているとその都度コードを修正する必要が出てきます。
その点こちらの方法だともっとシンプルに、かつハイフンやアンダースコアが含まれている動画IDも抜き出せます。
var url = 'https://www.youtube.com/watch?v=動画URL'; // youtube動画のURL
var id = url.split('v=')[1];
仕組みとしては、
- URLを.split()で分割（サンプルではURL中の「v=」で分割）
- 分割された文字列が格納された配列から「v=」以降の文字列（配列[1]の文字列）を抽出
というものです。
正規表現に慣れていない人（僕です）からすると幾分シンプルで使いやすそう。
単純にURLをID直前で分割して後半部分を抜き出すだけですが、この方法であれば桁数や文字種に悩まされることはないかと思います。
ただ弱点として、↑の方法はあらゆる状況に対応できません。
たとえば、再生リストなどからアクセスした動画URLにはID部分の後ろにオプションコードが付きます。
その為↑のままではID以降のオプションコードまで取得してしまうんですね。
といっても要件によってはこの方法でも問題ないケースがあるんじゃないでしょうか。
