JavaScriptで自動で外部リンクに自動でtarget="_blankとrel="noopener noreferrer"を付与する方法

公開日: 2024.05.06 更新日: 2024.05.20

外部サイトへのリンクに毎回手動でtarget="_blankとrel="noopener noreferrer"を追記するのって面倒くさいですよね！

そんな人のためにjsで自動で自サイトのドメインを判別してそのドメインがリンクのURLに含まれないときに
target="_blankとrel="noopener noreferrer"を付与させる方法をメモしておきます。

document.addEventListener('DOMContentLoaded', () => {
    LinkTargetBlankEvent();
});

const LinkTargetBlankEvent = () => {
    const domain = document.domain;
    const regexp = new RegExp(domain);
    const elements = document.querySelectorAll('a');

    elements.forEach(element => {
        let href = element.getAttribute('href');
        if (!href) { return; }
        console.log(href);
        const skipConditions = [
            href.startsWith('/'),
            href.startsWith('.'),
            href.startsWith('./'),
            href.startsWith('../'),
            href.startsWith('#'),
        ];
        if (skipConditions.some(condition => condition)) { return; }
        if (!regexp.test(href)) {
            element.setAttribute('target', '_blank');
            element.setAttribute('rel', 'noopener noreferrer');
        }
    });
};

サイト内の<a>タグをすべて取得し、自サイトのドメインが含まれていない場合に追加するようになっています。