jQueryで電話番号を判別して動的にリンクを追加する方法

jQueryで電話番号を判別して動的にリンクを追加する方法 javascript

以前、「ブラウザがスマホサイズの時だけ電話番号リンクを表示させる方法」や、「電話番号の自動追加を無効にする方法」など紹介しましたが、今回ご紹介するJQueryで電話番号リンクを自動追加する方法も合わせて使うと、htmlへの電話番号リンクの設定をする手間が減らせたり、「ユーザーエージェント判定」を使ってjQueryで電話番号リンクが表示されるデバイスを限定するなど、できることの幅がさらに広がります。
今回は、こういった活用方法も合わせてご紹介いたしますので是非最後までご確認ください。

JQueryで電話番号にリンクを追加させる方法

まずはサンプルのhtmlとjsをご確認ください。

html

js

今回はjQueryを利用しますので、先に読込んでおく必要があります。

Js2行目「$(‘.tel’)」で指定したクラス名（サンプルでは.tel）が設置された要素内にある電話番号を自動で判別してリンクを追加させる仕組みになります。サンプルでいうと「0120-000-000」の部分が電話番号になりますので、リンクは次のようなかたちで付与されます。

ソースを確認してもらえればわかるように、jsは電話番号を正規表現で判別して、指定された要素内の前後にリンクタグを挿入する仕組みのため、「電話番号：」の部分もリンクに含まれることになります。もし、サンプルのようなケースで、「電話番号：」の部分をリンクに含めたくない場合は、次のように記述してください。

電話番号リンクが表示されるデバイスを限定する方法

電話番号リンクの表示をさせるデバイスを限定したいといった要望はよくあると思いますが、今回分もあわせて、本サイト「WEBクリエイターの部屋」で紹介してきた方法を組み合わせると実現できます。

サンプルはiPhoneやAndroidのスマートフォンのブラウザでのみ電話番号リンクを表示させる場合を例に紹介します。

htmlは先ほどと同じサンプルを用います。

iPhoneやAndroidではタブレット、スマートフォンに関係なく自動的に電話番号にリンクが付与される可能性があるため、これを停止します。

→電話番号に自動で挿入されるリンクを無効にする２つの方法を確認する。

次にユーザーエージェント判定で、iPhoneとAndroidスマホを判別して、該当する場合のみに電話番号にリンクを追加させるようにします。

→【Javascript】スマホ・タブレット・PCをユーザーエージェント判定で判別する方法を確認する。
→前章JQueryで電話番号にリンクを追加させる方法を確認する。

これで、iPhoneやAndroidのスマートフォンのブラウザでのみ電話番号リンクを表示させことができます。
今回はほんの一例でしたが、他にも活用できることがあると思いますので是非お試しください。