☎️

電話番号っぽい文字列をリンク変換

2022/01/19に公開

文中に突然現れる電話番号文字列をクリックした時に、電話がかけられると便利かもしれません。
最近の携帯だと、電話の文字列を選択すれば「電話する」選択肢が出てきたりしますが、telリンクの方が親切かもしれません。
あるいはそう考えたディレクターから指示が飛んで、以下のようなコードを書く必要が出てくるかもしれません。

電話番号かどうかチェックするライブラリも読み込む

JavaScriptで電話番号のバリデーション&自動フォーマット
電話番号かどうかの判断はGoogle製ライブラリにお任せしますので、
この記事を参考に、以下読み込みます。

<script type='text/javascript' defer src='https://cdnjs.cloudflare.com/ajax/libs/libphonenumber-js/1.1.10/libphonenumber-js.min.js' id='libphonenumber-js'></script>

コード

const postdata_match = document.querySelectorAll('.postdata');
postdata_match.forEach(postdata => {
  const match_tels = postdata.innerHTML.match(/(\d{2,4})\-?(\d{2,4})\-?(\d{4})/g);
  if (match_tels === null) return;
  match_tels.forEach(tel => {
    if (!check_phonenumber(tel)) return;
    const tel_link = tel.replaceAll("-", "");
    const replace_tel = `<a href="tel:${tel_link}">${tel}</a>`;
    postdata.innerHTML = postdata.innerHTML.replaceAll(tel, replace_tel);
  });
});

function check_phonenumber(value) {
  const validateTel = function(value) {
    const formattedNumber = new libphonenumber.AsYouType('JP').input(value)
    return value === formattedNumber
  }
  const res = validateTel(value);
  if (res) {
    return true;
  }
  return false;
}

このコードだと.postdata内の文字列を読み取り、電話番号っぽい文字列をチェックして、telタグに書き換えます。
/(\d{2,4})\-?(\d{2,4})\-?(\d{4})/g ここがポイントかと思います。
最初のハイフンまでが2-4個の数字区切りにしています。
ハイフンなくても検出するので、他に電話番号っぽい文字列が出てきても検出してしまいます。
それは仕方ないです。
ハイフンが必ず付いている状況であれば、最初のハイフンを必須にすれば誤検出がなくなると思います。
/(\d{2,4})\-(\d{2,4})\-?(\d{4})/g
もっとスマートに書く方法があるかと思いますが、一応上記で動作するかと思います。

Discussion