【jQuery】レスポンシブサイトでスマホ表示のときだけ電話番号をリンクにするやつ

たぶんこの手のスクリプトは検索すればいくらでも出てくると思うんですけど、なんか自分で書きたくなったので書いてみたやつを投稿します。

実行前HTML

<p>詳しくはお電話（<span class="tel-link">0120-114-514</span>）にてお問い合わせください。</p>

jQuery

(function($) {
    var break_point = 768,
    resize_timer = null;

    $(function(){
        var $tel = $('.tel-link');

        function switch_tel() {
            var window_w = parseInt($(window).width());
            $tel.each(function(){
                var tel_text = $(this).text().replace(/-|－/g, '').replace(/[０-９]/g, function(s){
                    return String.fromCharCode(s.charCodeAt(0) - 65248);
                });
                if(window_w >= break_point){
                    $(this).children().contents().unwrap();
                } else {
                    $(this).wrapInner('<a href="tel:'+tel_text+'" />');
                }
            });
        }
        if($tel.length){
            switch_tel();
        }

        $(window).on('resize', function(){
            if($tel.length){
                clearTimeout(resize_timer);
                resize_timer = setTimeout(function(){
                    switch_tel();
                }, 200);
            }
        });
    });
})(jQuery);

実行後HTML

<p>詳しくはお電話（<span class="tel-link"><a href="tel:[phone]">0120-114-514</a></span>）にてお問い合わせください。</p>

ウィンドウ幅が767px以下の場合にこうなります。

<p>詳しくはお電話（<span class="tel-link">0120-114-514</span>）にてお問い合わせください。</p>

ウィンドウ幅が768px以上の場合はそのままです。

解説

はじめにPC表示とスマホ表示のブレイクポイントは768pxとして定義します。
そうではないサイトの場合は2行目の変数「break_point」の数値を適宜変更してください。

「tel-link」というclassの付いた要素（以下、「対象要素」）をドキュメント内から取得し、対象要素内のテキストを全角半角のハイフンを除外した上で全角数字を半角数字に変換し、変数「tel_text」に代入します。
参考：JavaScriptで英数を全角/半角に変換する方法

ブラウザのウィンドウ幅が2行目で定義したブレイクポイントの幅以上の場合、対象要素の中からHTMLタグを除外し、aタグを削除します。これをやらないと、ブラウザ幅を縮めたり広げたりして遊んでるとaタグが無限にネストしていく羽目になります。

ブラウザのウィンドウ幅がブレイクポイントより小さい場合、先ほど変数「tel_text」に代入した電話番号を含めたtel:リンクのaタグを対象要素の中に挿入します。

DOM構築後とウィンドウのリサイズ完了後に、ドキュメント内に対象要素が存在する場合、上記の処理を実行します。
参考：[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する

課題とか

本当は対象要素のタグをaタグに置き換える形で実装しようと思ったんですけど、classとかidといった属性を継承する処理を書くのが面倒だったので、横着してaタグを対象要素の中に突っ込むという形での実装となりました。

あと、ウィンドウ幅じゃなくてユーザーエージェントで判別して処理を分岐しろって話もあるかもしれませんが、そもそもレスポンシブサイトをわざわざウィンドウ幅を小さくして見る人はそんなにいないんじゃないかなと思うので、まあこれでいいんじゃないかなと思います。