☎️
電話番号っぽい文字列をリンク変換
文中に突然現れる電話番号文字列をクリックした時に、電話がかけられると便利かもしれません。
最近の携帯だと、電話の文字列を選択すれば「電話する」選択肢が出てきたりしますが、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