☰

Convert Any links to Clickable Links

URLやドメイン名（先頭の "h" が抜けている場合も含む）をクリック可能なリンクに変換する。ただし、入力中のフォーム領域は除外する。

目前为 2025-02-28 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Convert Any links to Clickable Links 
  3. // @namespace    kdroidwin.hatenablog.com/
  4. // @version      1.4
  5. // @description  URLやドメイン名（先頭の "h" が抜けている場合も含む）をクリック可能なリンクに変換する。ただし、入力中のフォーム領域は除外する。
  6. // @author       Kdroidwin
  7. // @match        *://*/* 
  8. // @exclude      *://github.com/*
  9. // @exclude      *://chat.openai.com/*
  10. // @exclude      *://blog.hatena.ne.jp/*
  11. // @grant        none
  12. // @license MIT 
  13. // ==/UserScript==
  14.  
  15. (function() {
  16.     'use strict';
  17.  
  18.     // 入力領域かどうかチェックする関数
  19.     function isEditable(node) {
  20.         if (!node) return false;
  21.         // ノードが input または textarea なら true
  22.         if (node.nodeName === 'INPUT' || node.nodeName === 'TEXTAREA') return true;
  23.         // contenteditable 属性が設定されているかチェック
  24.         if (node.hasAttribute && node.hasAttribute('contenteditable') && node.getAttribute('contenteditable') !== 'false') {
  25.             return true;
  26.         }
  27.         return false;
  28.     }
  29.  
  30.     function convertTextToLinks() {
  31.         // フォーム要素内は除外するため、walker で対象ノードを選ぶときに、親要素が入力可能な要素でないかもチェックする
  32.         const pattern = /(h?ttps?:\/\/[^\s]+|(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,})/g; 
  33.         
  34.         const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, {
  35.             acceptNode: node => {
  36.                 // 親要素または祖先に input/textarea/contenteditable 要素があるかチェック
  37.                 let current = node.parentNode;
  38.                 while (current) {
  39.                     if (isEditable(current)) {
  40.                         return NodeFilter.FILTER_REJECT;
  41.                     }
  42.                     current = current.parentNode;
  43.                 }
  44.                 if (node.parentNode && node.parentNode.tagName !== 'A' && pattern.test(node.nodeValue)) {
  45.                     return NodeFilter.FILTER_ACCEPT;
  46.                 }
  47.                 return NodeFilter.FILTER_REJECT;
  48.             }
  49.         });
  50.  
  51.         let nodes = [];
  52.         while (walker.nextNode()) {
  53.             nodes.push(walker.currentNode);
  54.         }
  55.  
  56.         nodes.forEach(node => {
  57.             const fragment = document.createDocumentFragment();
  58.             const parts = node.nodeValue.split(pattern);
  59.             parts.forEach(part => {
  60.                 const text = part.trim();
  61.                 if (/^ttps:\/\//i.test(text)) {
  62.                     const link = document.createElement('a');
  63.                     link.href = 'h' + text;
  64.                     link.textContent = text;
  65.                     link.target = '_blank';
  66.                     fragment.appendChild(link);
  67.                 } else if (/^https?:\/\//i.test(text)) {
  68.                     const link = document.createElement('a');
  69.                     link.href = text;
  70.                     link.textContent = text;
  71.                     link.target = '_blank';
  72.                     fragment.appendChild(link);
  73.                 } else if (/(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}/.test(text)) {
  74.                     const link = document.createElement('a');
  75.                     link.href = 'https://' + text;
  76.                     link.textContent = text;
  77.                     link.target = '_blank';
  78.                     fragment.appendChild(link);
  79.                 } else {
  80.                     // ※ここでは元の部分（trim していない）をそのままテキストとして追加
  81.                     fragment.appendChild(document.createTextNode(part));
  82.                 }
  83.             });
  84.             node.parentNode.replaceChild(fragment, node);
  85.         });
  86.     }
  87.  
  88.     // 初回実行
  89.     convertTextToLinks();
  90.     // DOM の変更がある場合に再度実行する
  91.     new MutationObserver(convertTextToLinks).observe(document.body, { childList: true, subtree: true });
  92. })();