[js]リンク先のURLに応じてclassを付与する方法（SNSの判別）

網羅するのは手作業の範疇。

やりたいこと
こうする

やりたいこと

こういうのがあったとする。

<ul class="sample_list">
    <li><a href="ｈttps://x.com/***" target="_blank"></a></li>
    <li><a href="ｈttps://twitter.com/***" target="_blank"></a></li>
    <li><a href="ｈttps://www.instagram.com/***/" target="_blank"></a></li>
    <li><a href="ｈttps://www.facebook.com/***" target="_blank"></a></li>
</ul>

jsでこうしたい。

<ul class="sample_list">
    <li><a class="xtwitter" href="ｈttps://x.com/***" target="_blank"></a></li>
    <li><a class="xtwitter" href="ｈttps://twitter.com/***" target="_blank"></a></li>
    <li><a class="instagram" href="ｈttps://www.instagram.com/***/" target="_blank"></a></li>
    <li><a class="facebook" href="ｈttps://www.facebook.com/***" target="_blank"></a></li>
</ul>

つまり、リンク先に応じてclassを付与したい。

アイコンを表示させるためにclassで切り替えるのが一般的なわけで、でもいちいち手打ちするのはめんどくさいし、wordpressだったらカスタムフィールドから出力することもあるだろうし、まあwpに限らずということでjsで操作するのが良いかなという感じ。

jsはラグが生まれるから、phpが使えるならそっちで付与するのがいい。

こうする

jQuery。

$(function(){
    const domainClassMap = [
        { keyword: 'x.com', className: 'xtwitter' },
        { keyword: 'twitter.com', className: 'xtwitter' },
        { keyword: 'instagram.com', className: 'instagram' },
        { keyword: 'facebook.com', className: 'facebook' },
        { keyword: 'threads.com', className: 'threads' },
        { keyword: 'youtube.com', className: 'youtube' },
        { keyword: 'line.me', className: 'line' },
        { keyword: 'tiktok.com', className: 'tiktok' }
    ];
    $('ul.sample_list a').each(function () {  //ここで対象を指定する
        const href = $(this).attr('href');
        if (!href) return;

        $.each(domainClassMap, function (_, item) {
            if (href.includes(item.keyword)) {
                $(this).addClass(item.className);
                return false;
            }
        }.bind(this));
    });
})

urlに特定のキーワードが含まれていたら応じた文字列をclassとして付与する仕組み。
配列で管理してるから対応するSNSを増やしたい場合はそこに追記すれば良いという、視覚的に優しい設計。

当然だけど、ここに並んでないものには対応してないから随時追加するなりhtml側の制限をする形が必要になる。