正規表現で OR 検索したやつを別々の色でハイライト

    
      
  • /*
     * @title 正規表現で or 検索したやつを別々の色でハイライト
     * @description 正規表現で or 検索したやつを別々の色でハイライト
     * @include https://*/*
     * @license MIT License
     */
    
    const colors = ['yellow', 'orange', 'yellowgreen', 'pink'];
    const matched = new Map();
    
    let lastIndex = -1;
    const re = prompt('RegExp');
    document.body.innerHTML = document.body.innerHTML.replace(new RegExp(re, 'ig'), (str) => {
      const key = str.toLowerCase()
      if (matched.has(key)) {
        const color = matched.get(key);
        return `<span style="padding: 1px; color: black; background-color: ${color};">${str}</span>`
      }
      const nextColor = colors[++lastIndex];
      matched.set(key, nextColor);
      return `<span style="padding: 1px; color: black; background-color: ${nextColor};">${str}</span>`;
    });
  • Permalink
    このページへの個別リンクです。
    RAW
    書かれたコードへの直接のリンクです。
    Packed
    文字列が圧縮された書かれたコードへのリンクです。
    Userscript
    Greasemonkey 等で利用する場合の .user.js へのリンクです。
    Loader
    @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
    Metadata
    コード中にコメントで @xxx と書かれたメタデータの JSON です。