タグを出現回数によってタグの文字の大きさを変更するコードを実装しました.

2025年8月25日
文字数[1011文字] この記事は1分16秒で読めます.

おはようございます.先日の休みに昼寝から目を覚ましたときに「あっそういや」と思って実装した機能がタグを出現回数によってタグの文字の大きさを変更するコードでした.記事の最後の最後あたりに付いているタグ文字の大きさが記事によって変わっているのが分かると思います.

こういうアイディアはもともとあるけれど、そのアイディアさえも思いつかなくなってしまったら悩ましいですね.因みにリアクトをこのサイトに実装するという計画はまだ実行に移していません.

if(document.querySelector('#main_content')){
    let txt = document.querySelector('#main_content').textContent;
    let tagElements = document.querySelectorAll('.tag');
    [...tagElements].forEach(element => {
        element.style.fontSize = fontSizeChange(txt,element.textContent);
    });
}
function fontSizeChange(text,word)
{
  const regex = new RegExp(word, "gi");
  const matches = text.match(regex);
  let cnt = matches?.length ?? 0;
  const sizes = ['medium', 'x-large', 'xx-large', 'xxx-large'];
  let fontSize = sizes[
    cnt > 6 ? 3 :
    cnt > 4 ? 2 :
    cnt > 2 ? 1 : 0
  ];

移したら技術共有か何かで記事を書くかもしれないです.

明日へ続く