テキスト自動リンク化（URL・メール対応）

/* テキスト自動リンク化 — style.css
   :root の変数を書き換えるだけで色をカスタマイズできます */
:root {
  --color-accent:  #2B7FE8;  /* リンク色・ボタン色 */
  --color-border:  #E5E7EB;  /* ボーダー色 */
  --color-text:    #1A2332;  /* テキスト色 */
}

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: sans-serif;
  padding: 24px;
  max-width: 640px;
  margin: 0 auto;
  color: var(--color-text);
}

/* ========== テキストエリア ========== */
.autolink-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.autolink-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.7;
  resize: vertical;
  font-family: inherit;
}

.autolink-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(43, 127, 232, 0.15);
}

/* ========== ボタン ========== */
.autolink-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.autolink-btn {
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.autolink-btn:hover { opacity: 0.85; }

.autolink-reset {
  background: #fff;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 9px 16px;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}

.autolink-reset:hover { background: #f5f5f5; }

/* ========== 変換結果エリア ========== */
.autolink-result-wrap { margin-top: 20px; }

.autolink-result-label {
  font-size: 13px;
  font-weight: 600;
  color: #888;
  margin: 0 0 8px;
}

/* white-space: pre-wrap で改行をそのまま表示する */
.autolink-result {
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: #fafafa;
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-all;
}

.autolink-result a {
  color: var(--color-accent);
  text-decoration: underline;
}

// === テキスト自動リンク化 script.js ===

// サンプルテキスト（初期値）
var SAMPLE_TEXT =
  '【社内連絡】5月度の勉強会についてお知らせします。\n\n' +
  '詳細はこちらをご確認ください。https://example.com/meeting/2026-05\n\n' +
  'ご不明な点は担当の山田までお問い合わせください。\n' +
  'メール: [email protected]\n\n' +
  'また、関連資料はhttps://example.com/docs/materialを参照ください。\n' +
  '申し込みフォームはこちら→https://example.com/form\n\n' +
  '※ Wordからコピペした場合もそのまま貼り付けてお試しください。';

// URL（グループ1）とメールアドレス（グループ2）をまとめて検出する正規表現
// 、-￿: ひらがな・カタカナ・漢字・全角記号。この範囲が来たらURLの終端とする
var LINK_RE = /(https?:\/\/[^\s、-￿]+)|([a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,})/g;

// テキストを正規化する（Wordコピペ対策）
function normalizeText(text) {
  return text
    .replace(/\r\n/g, '\n')    // Windows改行コードをUnix改行に統一
    .replace(/\r/g, '\n')      // Mac旧改行コードをUnix改行に統一
    .replace(/\t/g, ' ')       // タブ文字を半角スペースに変換
    .replace(/ /g, ' ')   // ノーブレークスペースを半角スペースに変換
    .replace(/　/g, ' ');  // 全角スペースを半角スペースに変換
}

// URLの末尾についた句読点・括弧を除去する
// 例: 「(https://example.com)」の末尾 ) を取り除く
function trimTrailing(url) {
  return url.replace(/[.,!;:)）]+$/, '');
}

// テキストをリンク化してDOMノードの配列を返す
// innerHTML は使わず createElement/createTextNode で安全に組み立てる
function buildNodes(text) {
  var nodes = [];
  var lastIndex = 0;
  var match;

  LINK_RE.lastIndex = 0; // グローバル正規表現の検索位置をリセット

  while ((match = LINK_RE.exec(text)) !== null) {
    // マッチ前のプレーンテキスト部分をテキストノードとして追加する
    if (match.index > lastIndex) {
      nodes.push(document.createTextNode(text.slice(lastIndex, match.index)));
    }

    var a = document.createElement('a');

    if (match[1]) {
      // URLのリンク化
      var url = trimTrailing(match[1]);
      a.setAttribute('href', url);
      a.textContent = url;
      a.setAttribute('target', '_blank');
      a.setAttribute('rel', 'noopener noreferrer');
      // 末尾記号を取り除いた分だけ次の検索開始位置を手動で調整する
      LINK_RE.lastIndex = match.index + url.length;
    } else {
      // メールアドレスのリンク化
      a.setAttribute('href', 'mailto:' + match[2]);
      a.textContent = match[2];
    }

    nodes.push(a);
    lastIndex = LINK_RE.lastIndex;
  }

  // 残りのプレーンテキストを追加する
  if (lastIndex < text.length) {
    nodes.push(document.createTextNode(text.slice(lastIndex)));
  }

  return nodes;
}

// 変換を実行してDOMに反映する
function convertLinks() {
  var textarea = document.getElementById('autolink-input');
  var resultEl = document.getElementById('autolink-result');
  var resultWrap = document.getElementById('autolink-result-wrap');

  var nodes = buildNodes(normalizeText(textarea.value));

  resultEl.textContent = ''; // 前回の変換結果をクリアする
  for (var i = 0; i < nodes.length; i++) {
    resultEl.appendChild(nodes[i]);
  }
  resultWrap.hidden = false;
}

// リセット: テキストエリアをサンプルに戻し、結果エリアを非表示にする
function resetDemo() {
  document.getElementById('autolink-input').value = SAMPLE_TEXT;
  document.getElementById('autolink-result').textContent = '';
  document.getElementById('autolink-result-wrap').hidden = true;
}

// 初期化: テキストエリアにサンプルテキストをセット、ボタンにイベントを登録する
document.getElementById('autolink-input').value = SAMPLE_TEXT;
document.getElementById('autolink-btn').addEventListener('click', convertLinks);
document.getElementById('autolink-reset').addEventListener('click', resetDemo);