【JavaScript】文字列内のハッシュタグをリンクに自動変換する

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptで文字列内のハッシュタグをリンクに自動変換する方法をご紹介しています。

JavaScriptで文字列内のハッシュタグをリンクに自動変換したいな。良い方法ないかな？

上記の疑問にお答えします。

では、解説していきます。

文字列内にハッシュタグを設置する

文字列内にハッシュタグを設置します。ハッシュタグは#から半角・全角スペースまでの文字列とします。

下記は有名なダミーテキスト（徒然草）の一部をハッシュタグに書き換えたものです。下記の文字列を取得し、次項でハッシュタグの部分をリンクに変換していきます。

HTML

<p class="js-text">つれづれなるまゝに、日暮らし、硯にむかひて、#心にうつり ゆくよしなし事を、#そこはかとなく 書きつくれば、あやしうこそものぐるほしけれ。</p>
<p class="js-text">#つれづれ なるまゝに、日暮らし、硯にむかひて、心にうつり#ゆくよし なし事を、そこはかとなく 書きつくれば、あやしうこそものぐるほしけれ。</p>
<p class="js-text">つれづれなるまゝに、#日暮らし 、硯にむかひて、心にうつり ゆくよしなし事を、そこはかとなく 書きつくれば、#あやしうこそ ものぐるほしけれ。</p>

文字列内のハッシュタグをリンクに変換する

前項で作成したHTMLから文字列を取得し、文字列内のハッシュタグをリンクに変換します。リンクに変換というのは、URLにするのではなく、ハッシュタグの文字列をa要素で囲うという意味合いとなります。

JavaScript

const setHashtagLink= (selector)=>{
    const elements = document.querySelectorAll(selector);
    elements.forEach(element =>{
        element.innerHTML = element.innerHTML.replace(/#(\S+)/g, '<a href="#$1">#$1</a>');
    });   
}
setHashtagLink('.js-text');

上記スクリプトの実行後のDOMは下記のように変化します。

HTML

<p class="js-text">つれづれなるまゝに、日暮らし、硯にむかひて、<a href="#心にうつり">#心にうつり</a> ゆくよしなし事を、<a href="#そこはかとなく">#そこはかとなく</a> 書きつくれば、あやしうこそものぐるほしけれ。</p>
<p class="js-text"><a href="#つれづれ">#つれづれ</a> なるまゝに、日暮らし、硯にむかひて、心にうつり<a href="#ゆくよし">#ゆくよし</a> なし事を、そこはかとなく 書きつくれば、あやしうこそものぐるほしけれ。</p>
<p class="js-text">つれづれなるまゝに、<a href="#日暮らし">#日暮らし</a> 、硯にむかひて、心にうつり ゆくよしなし事を、そこはかとなく 書きつくれば、<a href="#あやしうこそ">#あやしうこそ</a> ものぐるほしけれ。</p>

文字列内のハッシュタグがリンクに変換されていますね。これで本記事のゴールは達成です。

リンクに変換した要素を取得する

せっかくなので、文字列内のハッシュタグをリンクに変換した後、リンクに変換した全ハッシュタグを取得し、リスト化できるようにしたいと思います。

JavaScript

const getHashtagLink= (selector)=>{
    const elements = document.querySelectorAll(selector);
    return [...elements].map(
        element => [...element.querySelectorAll('a')]
    ).flatMap(a => a);
}
getHashtagLink('.js-text');

上記関数の実行結果をconsole.logで出力すると、下記結果が出力されます。