Blogger:検索ページの検索キーワードを、URLのクエリ文字列から取得するJavaScript

イントロダクション

Google のブログサービス「Blogger」の、Navbar にある検索ボックスを使用して検索した場合に、その検索キーワードを取得する方法について検討しました。

Blogger:検索ページの検索キーワードを取得する方法について検討
http://upa-pc.blogspot.com/2015/02/blogger-search-keyword-get.html

今回は、実際に検索ページの検索キーワードを、JavaScript を使用して取得してみます。
JavaScript による取得方法として、URL のクエリ文字列から検索キーワードを取り出す方法を実装してみます。

検索ページの検索キーワードを取得する - URL のクエリ文字列から検索キーワードを取り出す

まず、Blogger の検索結果のページの URL 構造について、おさらいしてみます。

例えば、このブログを”テスト”というキーワードで検索した場合の検索結果は、以下の URL のページに表示されます。

Dr.ウーパのコンピュータ備忘録: テストの検索結果
http://upa-pc.blogspot.jp/search?q=%E3%83%86%E3%82%B9%E3%83%88

この時、URL のクエリ文字列として、q=の後ろの部分にエンコードされたクエリ文字列が付与されています。

つまり、JavaScript の処理としては、URL の中から q=keyword の部分を探し出し、keyword の部分を抜き出し、デコードすれば、検索キーワードを取得することが出来るわけです。

URL のクエリ文字列から検索キーワードを取り出す JavaScript コード

上記の条件を元に、URL のクエリ文字列から検索キーワードを取り出す JavaScript コードを作成しました。

コード：

<script type="text/javascript">
<!--
    
    /*
    検索ページの URL に含まれる検索キーワード(q=keyword の keyword部分)を
    デコードして返します

    戻り値：
    デコードした検索キーワード
    URL に検索キーワードが含まれていない場合、null を返します
    */
    function Blogger_getSearchParameter() {
        
        // URL のクエリ文字列から、エンコードされた検索キーワードを取得
        var match_result = location.search.match(/[?&]q=([^&]*)/);
        if (match_result) {

            // 検索キーワードをデコードして返す
            // なお、form でデータを送信すると、単語同士を隔てる空白が + に変換されるため、
            // デコード関数でデコードする前に、+ を半角スペースに変換している
            return decodeURIComponent(match_result[1].replace(/\+/g, " "));
        }

        return null;
    }


//-->
</script>

Blogger_getSearchParameter 関数を呼び出すと、Blogger の検索ページに居る場合、検索キーワードを取得することができます。

解説：

function Blogger_getSearchParameter() {
利用しやすいように、検索キーワードを取得する処理を関数化しました。

// URL のクエリ文字列から、エンコードされた検索キーワードを取得
var match_result = location.search.match(/[?&]q=([^&]*)/);
URL のクエリ文字列から、エンコードされた検索キーワードの取得を行っています。
location.search に URL のクエリ文字列の部分が格納されているため、その部分に対して正規表現を用いて、”q=keyword” の keyword の部分を取り出しています。

一般的に、URL のクエリ文字列からパラメータを取得する方法として、個々のパラメータを分離した後、パラメータ名と値を分離する方法がありますが、今回は検索文字列だけ取得できればよいので、正規表現による取得を行いました。

if (match_result) {
クエリ文字列内に、検索キーワードがあった場合に、以下の処理が実行されます。

// 検索キーワードをデコードして返す
// なお、form でデータを送信すると、単語同士を隔てる空白が + に変換されるため、
// デコード関数でデコードする前に、+ を半角スペースに変換している
return decodeURIComponent(match_result[1].replace(/\+/g, " "));
検索キーワードに含まれる + を半角スペースにした後（form で送信されたときに、半角スペースが + に置き換わっているので、逆に + を半角スペースに置き換える）、デコード処理を実施しています。

このデコード処理については、以下のリンク先が参考になります。

GETの値を取得する方法 | JavaScript プログラミング解説
http://so-zou.jp/web-app/tech/programming/javascript/sample/get.htm

javascript: escape(), encodeURI(), encodeURIComponent() 比較 (groundwalker.com)
http://groundwalker.com/blog/2007/02/javascript_escape_encodeuri_encodeuricomponent_.html

decodeURIComponent() - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent

match により、正規表現に一致した部分を取り出した場合に、キーワードの部分のみ取り出せるように、正規表現の中で取り出したい部分にマッチする箇所を () で囲っています。

今回は正規表現の中に () が 1 つしかないため、match で取得した配列の [1] に、その正規表現の () 内にマッチした文字列が入っています。

この正規表現と match については、以下のリンク先が参考になります。

String.prototype.match() - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/match

RegExp.prototype.exec() - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec

}
return null;
クエリ文字列内に、検索キーワードがない場合には、null を返します。

}
以上の処理により、URL のクエリ文字列から検索キーワードを取り出しています。

テスト結果：

実際にこのコードをブログに張り付けて、いくつかの条件でテストを行いました。

条件を行ったページ（URL）、Blogger_getSearchParameter() の実行結果（結果）を示します。

検索ページ以外：

URL : http://upa-pc.blogspot.jp/
結果：null

空の検索ワード：

URL : http://upa-pc.blogspot.jp/search?q
結果：null

検索ワード「Blogger」：

URL : http://upa-pc.blogspot.jp/search?q=Blogger
結果：Blogger

検索ワード「Blogger Feed」：

URL : http://upa-pc.blogspot.jp/search?q=Blogger+Feed
結果：Blogger Feed

検索ワード「ブログ」：

URL : http://upa-pc.blogspot.jp/search?q=%E3%83%96%E3%83%AD%E3%82%B0
結果：ブログ

検索ワード「ブログ　検索」：

URL : http://upa-pc.blogspot.jp/search?q=%E3%83%96%E3%83%AD%E3%82%B0%E3%80%80%E6%A4%9C%E7%B4%A2
結果：ブログ　検索

検索ワード「ブログ　検索」・他のクエリ文字列を含んだURL：

URL : http://upa-pc.blogspot.jp/search?q=%E3%83%96%E3%83%AD%E3%82%B0%E3%80%80%E6%A4%9C%E7%B4%A2&updated-max=2014-11-20T18:53:00%2B09:00&max-results=20&start=20&by-date=false&token=～省略～
結果：ブログ　検索

このように、意図したとおり、検索キーワードの取得が行えていることが分かります。

重要な注意点

検索キーワードの部分には、第三者が（一部使用できる文字に制限はありますが）自由に文字を設定できてしまいます。

そのため、検索キーワードの部分をデコードしたら、任意のHTMLのタグや、任意のJavaScriptコードが含まれている可能性があります。

従って、検索キーワードの部分をデコードした結果を、そのまま document.write や element.innerHTML でブラウザのドキュメントに書き出す行為はセキュリティ上の問題を引き起こします。

十分に、扱いに注意してください。

安全に検索キーワードをブラウザのドキュメントに表示する方法の一例を以下に示します。

以下の方法を使用すると、検索キーワードに HTML のタグや、JavaScript コードが含まれていたとしても、安全にデータを扱うことが出来るはずです。

var keyword = "検索キーワード"; // 取得した検索キーワードが入っているとする

// ブラウザのドキュメントに検索キーワードを表示する場合
element.appendChild(document.createTextNode(keyword));

// ブラウザのドキュメントの要素の属性として、検索キーワードを設定する場合
// テキストボックス（type属性に"text" が指定された input タグ）などに、検索キーワードを表示する場合など
element.setAttribute("value", keyword);

// ※ element には、事前に検索キーワードを囲む HTML タグや、検索キーワードを属性の値として設定したい HTML タグといった、element オブジェクトが代入されていることとします。

なお、画面上に設定したそれらの値を、更に別の JavaScript などで処理を加えている場合には、安全に値を扱える仕組みになっているかどうかチェックする必要があります。

その他備考

今回は、Blogger の検索ページの例でしたが、同じように URL にクエリ文字列として検索キーワードを埋め込んでいる検索システムでは、上記のコードをそのまま、もしくは一部手直しして使用できる可能性があります。

まとめ

このように、JavaScript を使用すれば、Blogger の検索ページの URL のクエリ文字列から、検索キーワードを抜き出すことができます。

検索キーワードが取得できれば、そのキーワードを元に、JavaScript でいろいろなことを行えそうです。

ただし、重要な注意点に記載したように、その取得したキーワードの扱いには、注意が必要です。

Dr.ウーパのコンピュータ備忘録

2015年2月26日木曜日