上毛印刷株式会社

【JavaScript】特定のワードにリンクを挿入する、ワードとリンクはJSONで管理

【JavaScript】特定のワードにリンクを挿入する、ワードとリンクはJSONで管理

2025年02月03日
WEBサイト制作
  • #HTML
  • #css
  • #JavaScript
  • #tips

こんにちは!
上毛印刷WEB制作担当のソーヤです。

以前、サイバーセキュリティ系のポータルサイトを制作していた際、「記事内の用語に解説をつけたい」というような要望がありました。
その時はなにか色々な理由をつけて実装は流れたと思います。

ですが、「あー、たしかにそんな機能があったら便利だなー」と心残りだったので、
数年越しに実現しました!

実装例

ダミー文です。
辞令は場合私かもの差の作文ようませうて、私がその学校に全く繰返しから、この時間に結びて、そう考え他にああ犯さからまだもっ注意で行くがしかもの雑木を使用するまでましましょ、
その心に出るで、個性を据えてその辺を右テン出来んが、向うを知れたとし訳なく。通りた衣食間柄にはいますというものごとく。今だけの他をありていて、
第何へ主義の自分の意見の突き破っなるたと気がつきたて、無論大学の世の中は講演思いないが過ぎるでとともに国家。第二に社会の活動働かて始め子分を専攻作り上げるたとほかならでて、
そこに学習して来文芸においてもののしうでくれますという人。第二で国家の人を連れましと行きまし、それを考える文を大変でないながらあるんという理。それならそんな二日に関係頼め方ますなけれた。
あなたが時間の必竟にして、無論飯的に、こうの乱暴をしでし西洋ないでば、他に意味落ち貧乏人も高く、農家で威張っ主義はない、だから状態が貼り三つは淋しいという事がし事でしょ。
何にとうとうほかえ騒ぐて、同じ二打で得意に治五郎けやむをえためからは、その免ののの壁へ思えでし主義の招待になる必要に云っしいるというものた。
もう雑誌にないのに大変と主義を支配云うますのして、時代に混同去っ、金力を食わせありよりしと、学習をなれ、主義をなさいたと知れば、不平の構成に起る。
さらに勇猛な外国が影響掘りを楽しむもので。それからその性のものは、何をないてその間としてまあ運動あれいい事ましまして、何主命は多分分子に殖やし自由です当人から出るているべきてはいるうらしいたとなるです。
相当に多少心になっますば、違の外国米国松山において事は大丈夫不幸のする文学だたで。そう高等にい部分ますなかって、また英京都まで兄の知れで百姓は殖やしんませ。
ただいま世間忠告家者と描いましような方に大変に弟へ云っように国家までというがしまっましから、私はまあ英語な。
学校が行っては社会をないくれと潰れるられるてあなたまでなけれて、けっして先としが場合と仕方に偉くようです。
概念に考えがらないとか、秩序に思うましやら、しかしながら今日しから懊悩切り上げがっない、堅めで利用送っに対して誂へ述べものか、どうもあなたも英国めの場合の会員をはますようだ。
秋刀魚に行く、がたの見当作り上げるながら人達ご存じに思っれる、名の実に文学に打ち明けがいただくて、さらに詳しいしし。いつも真面目の後れたて、
ひょろひょろ云わて英語はそこが察せては年代ののが仕事離さて云っですについて戦争に叱りとくれるのかも行っですた。またもしどんな図書館が聴いがもわがまままし事に越せある。
鵜の日本弟というものは、大話立つます国家自分の腐敗のしです先生って十分から生れていようた。ただ私も私も英国を道具で駈けという学習ではない事でので、
恐らく学校人から思いてならます空虚は慨のむやみでは詳しくといな。と気がつきのは、その失礼た愉快は無論一人ぼっちから意味ありゃいるなからたならまし。
あなたは私がませて不愉快を知っですもので運動しのたませない。ちっとも私にますで代りというものがぼんやりできせのを考えて連れたら事たでで。
ある入会という、これしか自己時分ますと賞翫知れから世の中院やかましくっ点ん。その文学目的という想像から教育に向いばはみるですん。
むしろそれ中学のようすなわち馬鹿らしく腹において相当を見えるとは私が考えんありと、その書物はよく皆留学を落ちつけてみるたら。

HTML例

<p id="word-target">
  辞令は場合私かもの差の作文ようませうて、私がその学校に全く繰返しから、この時間に結びて、そう考え他にああ犯さからまだもっ注意で行くがしかもの雑木を使用するまでましましょ、
  その心に出るで、個性を据えてその辺を右テン出来んが、向うを知れたとし訳なく。通りた衣食間柄にはいますというものごとく。今だけの他をありていて、
  第何へ主義の自分の意見の突き破っなるたと気がつきたて、無論大学の世の中は講演思いないが過ぎるでとともに国家。第二に社会の活動働かて始め子分を専攻作り上げるたとほかならでて、
  そこに学習して来文芸においてもののしうでくれますという人。第二で国家の人を連れましと行きまし、それを考える文を大変でないながらあるんという理。それならそんな二日に関係頼め方ますなけれた。
  あなたが時間の必竟にして、無論飯的に、こうの乱暴をしでし西洋ないでば、他に意味落ち貧乏人も高く、農家で威張っ主義はない、だから状態が貼り三つは淋しいという事がし事でしょ。
  何にとうとうほかえ騒ぐて、同じ二打で得意に治五郎けやむをえためからは、その免ののの壁へ思えでし主義の招待になる必要に云っしいるというものた。
  もう雑誌にないのに大変と主義を支配云うますのして、時代に混同去っ、金力を食わせありよりしと、学習をなれ、主義をなさいたと知れば、不平の構成に起る。
  さらに勇猛な外国が影響掘りを楽しむもので。それからその性のものは、何をないてその間としてまあ運動あれいい事ましまして、何主命は多分分子に殖やし自由です当人から出るているべきてはいるうらしいたとなるです。
  相当に多少心になっますば、違の外国米国松山において事は大丈夫不幸のする文学だたで。そう高等にい部分ますなかって、また英京都まで兄の知れで百姓は殖やしんませ。
  ただいま世間忠告家者と描いましような方に大変に弟へ云っように国家までというがしまっましから、私はまあ英語な。
  学校が行っては社会をないくれと潰れるられるてあなたまでなけれて、けっして先としが場合と仕方に偉くようです。
  概念に考えがらないとか、秩序に思うましやら、しかしながら今日しから懊悩切り上げがっない、堅めで利用送っに対して誂へ述べものか、どうもあなたも英国めの場合の会員をはますようだ。
  秋刀魚に行く、がたの見当作り上げるながら人達ご存じに思っれる、名の実に文学に打ち明けがいただくて、さらに詳しいしし。いつも真面目の後れたて、
  ひょろひょろ云わて英語はそこが察せては年代ののが仕事離さて云っですについて戦争に叱りとくれるのかも行っですた。またもしどんな図書館が聴いがもわがまままし事に越せある。
  鵜の日本弟というものは、大話立つます国家自分の腐敗のしです先生って十分から生れていようた。ただ私も私も英国を道具で駈けという学習ではない事でので、
  恐らく学校人から思いてならます空虚は慨のむやみでは詳しくといな。と気がつきのは、その失礼た愉快は無論一人ぼっちから意味ありゃいるなからたならまし。
  あなたは私がませて不愉快を知っですもので運動しのたませない。ちっとも私にますで代りというものがぼんやりできせのを考えて連れたら事たでで。
  ある入会という、これしか自己時分ますと賞翫知れから世の中院やかましくっ点ん。その文学目的という想像から教育に向いばはみるですん。
  むしろそれ中学のようすなわち馬鹿らしく腹において相当を見えるとは私が考えんありと、その書物はよく皆留学を落ちつけてみるたら。
</p>

CSS例

.wordlink {
  background-color: yellow;
  font-weight: bold;
  color: black;
}

JavaScript例

async function highlightKeywordsOnLoad() {
  const targetElement = document.getElementById('word-target');
  if (!targetElement) return;
  let keywordsData;
  try {
    const response = await fetch('./keywords.json');
    keywordsData = await response.json();
  } catch (error) {
    console.error("Error loading keywords:", error);
    return;
  }
  function highlightAndLink(element, keywords) {
    keywords.forEach(({ word, url }) => {
      const regex = new RegExp(`(${word})`, 'gi');
      element.innerHTML = element.innerHTML.replace(regex, `<a href="${url}" target="_blank" class="wordlink">$1</a>`);
    });
  }
  highlightAndLink(targetElement, keywordsData.keywords);
}
document.addEventListener('DOMContentLoaded', highlightKeywordsOnLoad);

JSON例

{
    "keywords": [
      { "word": "英語", "url": "https://ja.wikipedia.org/wiki/%E8%8B%B1%E8%AA%9E" },
      { "word": "秋刀魚", "url": "https://ja.wikipedia.org/wiki/%E3%82%B5%E3%83%B3%E3%83%9E" },
      { "word": "自由", "url": "https://ja.wikipedia.org/wiki/%E8%87%AA%E7%94%B1" }
    ]
}

まとめ

今回もjQueryではなく、Vanilla.jsで実装してみました。

正直なところ完璧ではありません。
予想外のワードにリンクが挿入される可能性もあるので、
念の為公開前に一度内容に目を通しておくことをオススメします。

WEB制作担当ソーヤ

ソーヤ

上毛印刷WEB制作担当
前職は東証プライム企業の本社WEB受託チームにてフロントエンドエンジニアを3年経験。


この記事に対するご意見・ご感想・ご質問等ありましたら、
ぜひ下記フォームにてお送りください。

    お名前必須
    メールアドレス必須
    お問い合わせ内容必須
    PAGE TOP