【ChatGPT】検索ツール（ライバルチェック）をJavaScriptを作ってみた

<div class="jin-quick-cheker-01"> 
<div id="keyword-link-tool">
  <div>
    <label for="mainKeyword">① メインキーワード</label><br>
    <input type="text" id="mainKeyword" maxlength="20">
  </div>

  <div style="margin-top:12px;">
    <label for="searchKeywords">② 検索キーワード</label><br>
    <textarea id="searchKeywords" maxlength="50" rows="6" style="width:100%;"></textarea>
  </div>

  <div style="margin-top:12px;">
    <label for="searchKeywords">③ 検索エンジン</label><br>
      <input type="radio" name="searchEngine" value="google" checked>
      グーグル
    </label>
    <label style="margin-left:16px;">
      <input type="radio" name="searchEngine" value="yahoo">
      ヤフー
    </label>
  </div>

  <div style="margin-top:12px;">
    <label for="searchKeywords">④ allintitle付加</label><br>
    allintitle
    <label style="margin-left:8px;">
      <input type="radio" name="allintitle" value="yes" checked>
      付加する
    </label>
    <label style="margin-left:16px;">
      <input type="radio" name="allintitle" value="no">
      なし
    </label>
  </div>

  <div id="linkResult" style="margin-top:16px;"></div>
</div>
</div><!– //main -><script>
(function () {
  'use strict';

  const mainKeywordInput = document.getElementById('mainKeyword');
  const searchKeywordsTextarea = document.getElementById('searchKeywords');
  const linkResult = document.getElementById('linkResult');

  const COOKIE_SEARCH_KEYWORDS = 'search_keywords_text';
  const COOKIE_SEARCH_ENGINE = 'search_engine';

  function setCookie(name, value, days) {
    const maxAge = days * 24 * 60 * 60;
    document.cookie =
      encodeURIComponent(name) + '=' + encodeURIComponent(value) +
      '; max-age=' + maxAge +
      '; path=/' +
      '; samesite=lax';
  }

  function getCookie(name) {
    const encodedName = encodeURIComponent(name) + '=';
    const cookies = document.cookie.split(';');

    for (let cookie of cookies) {
      cookie = cookie.trim();
      if (cookie.indexOf(encodedName) === 0) {
        return decodeURIComponent(cookie.substring(encodedName.length));
      }
    }

    return '';
  }

  function getSelectedRadioValue(name) {
    const selected = document.querySelector('input[name="' + name + '"]:checked');
    return selected ? selected.value : '';
  }

  function setSelectedRadioValue(name, value) {
    const target = document.querySelector(
      'input[name="' + name + '"][value="' + CSS.escape(value) + '"]'
    );

    if (target) {
      target.checked = true;
    }
  }

  function createSafeLink(text, url) {
    const a = document.createElement('a');

    a.textContent = text;
    a.href = url;
    a.target = '_blank';
    a.rel = 'noopener noreferrer';

    return a;
  }

  function updateLinks() {
    const mainKeyword = mainKeywordInput.value.trim();
    const searchKeywords = searchKeywordsTextarea.value
      .split(/\r?\n/)
      .map(line => line.trim())
      .filter(line => line !== '');

    const searchEngine = getSelectedRadioValue('searchEngine');
    const useAllintitle = getSelectedRadioValue('allintitle') === 'yes';

    linkResult.textContent = '';

    if (!mainKeyword) {
      return;
    }

    searchKeywords.forEach(function (keyword) {
      const displayText = mainKeyword + ' ' + keyword;
      const queryText = (useAllintitle ? 'allintitle:' : '') + mainKeyword + '　' + keyword;

      let url = '';

      if (searchEngine === 'yahoo') {
        url = 'https://search.yahoo.co.jp/search?p=' + encodeURIComponent(queryText);
      } else {
        url = 'https://www.google.com/search?q=' + encodeURIComponent(queryText);
      }

      const p = document.createElement('p');
      p.appendChild(createSafeLink(displayText, url));
      linkResult.appendChild(p);
    });
  }

  function saveSettings() {
    setCookie(COOKIE_SEARCH_KEYWORDS, searchKeywordsTextarea.value, 365);
    setCookie(COOKIE_SEARCH_ENGINE, getSelectedRadioValue('searchEngine'), 365);
  }

  function init() {
    const savedKeywords = getCookie(COOKIE_SEARCH_KEYWORDS);
    const savedEngine = getCookie(COOKIE_SEARCH_ENGINE);

    if (savedKeywords) {
      searchKeywordsTextarea.value = savedKeywords;
    }

    if (savedEngine) {
      setSelectedRadioValue('searchEngine', savedEngine);
    }

    mainKeywordInput.addEventListener('input', updateLinks);

    searchKeywordsTextarea.addEventListener('input', function () {
      saveSettings();
      updateLinks();
    });

    document.querySelectorAll('input[name="searchEngine"]').forEach(function (radio) {
      radio.addEventListener('change', function () {
        saveSettings();
        updateLinks();
      });
    });

    document.querySelectorAll('input[name="allintitle"]').forEach(function (radio) {
      radio.addEventListener('change', updateLinks);
    });

    updateLinks();
  }

  init();
})();
</script>

.jin-quick-cheker-01 {
    border: 2px solid #5c7e58;
    padding: 1em;
    background: #fffdf6;
}
.jin-quick-cheker-01 > div > div > label:first-child {
    font-weight: bold;
}