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

by Cside 02/04 [2024/02/04 12:45:08]

正規表現で 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 LOADER Metadata ?

  Permalink

  このページへの個別リンクです。

  RAW

  書かれたコードへの直接のリンクです。

  Packed

  文字列が圧縮された書かれたコードへのリンクです。

  Userscript

  Greasemonkey 等で利用する場合の .user.js へのリンクです。

  Loader

  @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。

  Metadata

  コード中にコメントで @xxx と書かれたメタデータの JSON です。