telリンクをレスポンシブで切り替える

script.js

var fnc = {
  // 電話番号機能（a:tel）をスマホの場合のみ有効化する
  usableTel: function() {
    /**
     * PC, スマホでタグ自体を書き換える
     * $.each()内での使用を想定
     */
    var replaceFnc = function(index, elem) {
      var tag = elem.tagName,
          $self = $(elem),
          $html = $self.html(),
          telNumber = $self.data('tel');

      // スマホの場合
      if (utility.isSp() === true) {
        // 既に置き換え済みだったらスルー
        if (tag === 'A') {
          return false;
        }
        $self.replaceWith('<a href="tel:'+telNumber+'" data-tel="'+telNumber+'" data-action="call">' + $html +'</a>');
      }

      // PCの場合
      if (utility.isSp() === false) {
        // 既に置き換え済みだったらスルー
        if (tag === 'SPAN') {
          return false;
        }
        $self.replaceWith('<span data-tel="'+telNumber+'" data-action="call">' + $html +'</span>');
      }
    };

    // トラッキングイベント
    var traking = function() {
      console.log('トラッキング！');
      return false;
    };

    // 初期化
    var init = function() {
      $('[data-action=call]').each(replaceFnc);
      // replace前のDOMを見ているため、$('[data-action=call]')を再取得してeachでイベント付与
      $('[data-action=call]').each(function() {
        if (this.tagName === 'SPAN') {
          return false;
        }
        $(this).off('click.traking');  // 重複登録を防ぐため一旦解除してから再設定
        $(this).on('click.traking', traking);
      });
    };

    init();
  }
};

tel.html

<span data-action="call" data-tel="03-0000-0000">03-0000-0000</span>

utility.isSp()はウィンドウサイズ（など）からスマホかどうかを判断している