実行例

myAgent = "";
function myGetVer( myKey ){
  myStart = myAgent.indexOf( myKey ) + myKey.length;
  myEnd = myAgent.indexOf( ";", myStart );
  return "Ver." + myAgent.substring ( myStart, myEnd );
}

function mySearch( myKey ){
  return (myAgent.indexOf( myKey )>=0) ? true : false;
}

function myFunc( myUserAgent ){
  myAgent = myUserAgent + ";";
  myAgent = myAgent.replace( / /g, ";" );

// Opera/9.80 (Windows NT 6.1; WOW64) Presto/2.12.388 Version/12.14
  if ( mySearch( "Opera/" ) ) myVer = "Opera " + myGetVer( "Opera/" );

// Mozilla/5.0 (Windows NT 6.0; rv:19.0) Gecko/20100101 Firefox/19.0
  else if ( mySearch( "Firefox" ) ) myVer = "Firefox " + myGetVer( "Firefox/" );

// Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.99 Safari/537.22
  else if ( mySearch( "Chrome" ) ) myVer = "Google Chrome " + myGetVer( "Chrome/" );

// Mozilla/5.0 (Linux; U; Android 4.1.2; ja-jp; F-02E Build/V16R46A) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
  // Mozilla/5.0 (iPhone; CPU iPhone OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10B329 Safari/8536.25
  else if ( mySearch( "Mobile" ) && mySearch( "Safari" ) && mySearch( "Version" ) ) myVer = "Mobile Safari " + myGetVer( "Version/" );

// Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_3) AppleWebKit/536.28.10 (KHTML, like Gecko) Version/6.0.3 Safari/536.28.10
  else if ( mySearch( "Safari" ) && mySearch( "Version" ) ) myVer = "Safari " + myGetVer( "Version/" );

// Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0; Touch; MAFSJS)
  else if ( mySearch( "MSIE;" ) ) myVer = "Internet Explorer " + myGetVer( "MSIE;" );

else myVer = navigator.appName;
  return myVer;
}

myParam = navigator.userAgent;
document.write( "あなたのブラウザは、" , myFunc( myParam ) , " です" );
// --></script>

サンプルだけの HTMLはこちらへ

説明

「あなたのブラウザは、です」というメッセージをワンポイントに置いているホームページをよく見かけます。
※ 最近は、さっぱり見かけませんｗ

これは、わがイヌでもわかるJavaScript講座では Step.1 でサンプルになっているほどの単純なスクリプトです。
最初は、navigator.appName という長い英語でいきなりつまづいた方が多いでしょう。すみません。(^^;

このメッセージが、ありきたりになってしまったからには、自分のホームページは、バージョンも表示して、もう一歩リードしてみましょう。

バージョンの取得は、ユーザーエージェント( navigator.userAgent )の中に入っています。
※ Step.29 参照

主なブラウザのユーザエージェントを表示してみますと、
Opera/9.80 (Windows NT 6.1; WOW64) Presto/2.12.388 Version/12.14 OP9.80
Mozilla/5.0 (Windows NT 6.0; rv:19.0) Gecko/20100101 Firefox/19.0 FX19.0
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.99 Safari/537.22 GC25.0.1364.99
Mozilla/5.0 (Linux; U; Android 4.1.2; ja-jp; F-02E Build/V16R46A) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30 MSF4.0
Mozilla/5.0 (iPhone; CPU iPhone OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10B329 Safari/8536.25 MSF6.0
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_3) AppleWebKit/536.28.10 (KHTML, like Gecko) Version/6.0.3 Safari/536.28.10 SF6.0.3
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0; Touch; MAFSJS) IE10.0

のようになります。
この中から、バージョンを indexOf と substring で切り取っていかないといけないようです。

バージョンの記述している場所もバラバラで、ブラウザごとに indexOf と substring していくのも面倒くさいので関数でも作ってみましょう。

まず、メインとなる myFunc() を作りましょう。
myParam = navigator.userAgent;
document.write( myFunc( myParam ) );
パラメータに、ユーザエージェントの文字列を渡して、戻り値にブラウザとバージョンの文字列を返すという関数です。

myParam = "Opera/9.80 (Windows NT 6.1; WOW64) Presto/2.12.388 Version/12.14"
document.write( myFunc( myParam ) );
といった感じで、デバックもできます。

この関数の中で、ブラウザごとに処理を入れていきます。

まず、することは、ブラウザの検索です。

"Opera" はあるか、"Firefox" はあるか・・・。
こいつも関数にしてしまいましょう。
result = mySearch( "ブラウザ文字列キー" );
ユーザエージェントに指定の文字列があれば true、なければ false を戻り値に返すようにしました。
function mySearch( myKey ){
     return (myAgent.indexOf( myKey )>=0) ? true : false;
}

これで、if 文は、
if ( mySearch("Opera") ){ Operaの処理 }
のように見やすくなりました。

次に、バージョンの切り取りです。
こいつも関数にしてしまいましょう。
result = myGetVer( "バージョン文字列キー" );
指定の文字列の右隣りからセミコロンまでを切り取って、戻り値に返すようにしました。
function myGetVer( myKey ){
     myStart = myAgent.indexOf( myKey ) + myKey.length;
     myEnd = myAgent.indexOf( ";", myStart );
     return "Ver." + myAgent.substring ( myStart, myEnd );
}
※ substring、length は Step.9 参照
※ indexOf は Step.12 参照

ここで問題が。。
セミコロンまでを切り取るとしましたが、
Opera/9.80 (Windows NT 6.1; WOW64) Presto/2.12.388 Version/12.14
Mozilla/5.0 (Windows NT 6.0; rv:19.0) Gecko/20100101 Firefox/19.0
見事にバージョンの終わりにセミコロンが付いていません。。

そこで、
function myFunc( myUserAgent ){
     myAgent = myUserAgent + ";";
     myAgent = myAgent.replace( / /g, ";" );

ユーザエージェントの最後に無条件にセミコロンを付けたのと、
スペースも無条件にセミコロンに置き換えました。
        ↓
Opera/9.80;(Windows;NT;6.1;;WOW64);Presto/2.12.388;Version/12.14;
Mozilla/5.0;(Windows;NT;6.0;;rv:19.0);Gecko/20100101;Firefox/19.0;

● replace メソッド

replace は、指定の文字列を、指定の文字列へ変換してくれます。
置換後の文字列 = 置換前の文字列.replace( "変換前の文字列キー", "変換後の文字列キー" );
しかし、最初に見つけた文字列のみしか置き換えてくれません。

そこで、変換前の文字列キーの指定を、正規表現指定すれば、全置換えが可能です。
正規表現については、そのうち Step にでも追加するとして、今回はスルーしてください。（苦笑
myAgent = myAgent.replace( " ", ";" );
        ↓
myAgent = myAgent.replace( / /g, ";" );

ユーザーエージェント内の括弧 ( ) もスペースもセミコロンに変換したければ、
myAgent = myAgent.replace( /[() ]/g, ";" );
となります。
Opera/9.80;(Windows;NT;6.1;;WOW64);Presto/2.12.388;Version/12.14;
        ↓
Opera/9.80;;Windows;NT;6.1;;WOW64;;Presto/2.12.388;Version/12.14;

これで、myFunc() 内は、
// Opera/9.80 (Windows NT 6.1; WOW64) Presto/2.12.388 Version/12.14
if ( mySearch( "Opera/" ) ) myVer = "Opera " + myGetVer( "Opera/" );
と、1行でブラウザパターン毎に記述していけそうです。

myFunc の最後に、
     else myVer = navigator.appName;
     return myVer;
}
といった感じで、if 文に無かったブラウザは navigator.appName; だけの表示にします。

参考ステップ
Step.9 左から１文字ずつメッセージを表示してみましょう　※ substring、length
Step.12 どこからリンクしてきたか調べてみましょう　※ indexOf
Step.29 ブラウザ情報を取得してみましょう　※ navigator

▲TOP

実行例

リスト

説明