Top

文字列中のカラーコードに自動で色見本を付けるJavaScript

エディタなどでよく見る、#66cdaa や rgb(240, 128, 128) みたいな感じでカラーコードがテキスト中にあると自動で色見本を付けてくれる JavaScript を作ってみます。

正規表現を駆使して書くことになるので、完璧とまではいっていませんがそれなりに判別できるコードになったと思います。

#4283f4のカラーコード

カラーコードに自動で色見本

まずは、「特定の要素内にある文字列」に対する色見本を付けるコード。

JavaScript

function colorSampleTag(tag) {

  var elm = document.getElementsByTagName(tag);
  for(var i = 0; i < elm.length; i++) {
    var text = elm[i].innerHTML;
    text = text.replace(/((#[0-9a-f]{3})([^0-9a-f]|$))/gi, '<span style="display:inline-block;width:1em;height:1em;vertical-align:middle;margin-right:.5em;background-color:$2"></span>$1');
    text = text.replace(/(#[0-9a-f]{6})/gi, '<span style="display:inline-block;width:1em;height:1em;vertical-align:middle;margin-right:.5em;background-color:$1"></span>$1');
    text = text.replace(/(rgb\s*\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*\))/gi, '<span style="display:inline-block;width:1em;height:1em;vertical-align:middle;margin-right:.5em;background-color:$1"></span>$1');
    text = text.replace(/(rgba\s*\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*(1|0)?\.?[0-9]+\s*\))/gi, '<span style="display:inline-block;width:1em;height:1em;vertical-align:middle;margin-right:.5em;background-color:$1"></span>$1');
    elm[i].innerHTML = text;
  }
}

//使い方
colorSampleTag("code");

code 要素内にあるカラーコードに色見本を付けます。

サンプル

.sample {
  background-color: #52ACCC;
  color: rgba(16, 16, 16, .7);
}

.sample2 {
  box-shadow: 1px 1px 1px rgb(15, 255, 142);
}

code 要素内にカラーコードを見つけると、カラーコードの前に四角い色の付いた要素を追加して色見本を作っています。

次は「特定のクラス名を持った要素内にある文字列」に対する色見本コード。

JavaScript

function colorSampleClass(cl) {

  var elm = document.getElementsByClassName(cl);
  for(var i = 0; i < elm.length; i++) {
    var text = elm[i].innerHTML;
    text = text.replace(/((#[0-9a-f]{3})([^0-9a-f]|$))/gi, '<span style="display:inline-block;width:1em;height:1em;vertical-align:middle;margin-right:.5em;background-color:$2"></span>$1');
    text = text.replace(/(#[0-9a-f]{6})/gi, '<span style="display:inline-block;width:1em;height:1em;vertical-align:middle;margin-right:.5em;background-color:$1"></span>$1');
    text = text.replace(/(rgb\s*\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*\))/gi, '<span style="display:inline-block;width:1em;height:1em;vertical-align:middle;margin-right:.5em;background-color:$1"></span>$1');
    text = text.replace(/(rgba\s*\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*(1|0)?\.?[0-9]+\s*\))/gi, '<span style="display:inline-block;width:1em;height:1em;vertical-align:middle;margin-right:.5em;background-color:$1"></span>$1');
    elm[i].innerHTML = text;
  }
}

//使い方
colorSampleClass("color-sample");

コードはほぼ同じ。サンプルもほぼ同じですが、#52ACCC のように span などで囲むと、上の例の場合は .color-sample のクラス名を持つ要素全てのカラーコードに色見本を付けます。

スポンサーリンク

注意点

カラーコードは #000、#000000、rgb、rgba の型のみに対応。大文字でも小文字でも可。英語名のカラーコード、red や green には反応しません。

タグ内のカラーコード文字列にも反応して span タグで囲ってしまうためインラインスタイルが使われている文字列内では基本使えません。バグります。

<span style="color: #333">黒い文字</span>

を

<span style="color: <span style="display:inline-block;width:1em;height:1em;vertical-align:middle;margin-right:.5em;background-color:#333"></span>#333">黒い文字</span>

に変換

正規表現の締め出しが甘いので、例えば rgb(001,022,000) などにも反応してしまいます。そんなカラーコードは書かないと思いますが。

まとめ

エディタの真似をしたくてコードを書いてみました。ただ、エディタのように完璧に判別するには結構な正規表現の量になる気がします。

お遊び程度に真似事ならできるかなーといったレベルのコードだと思うので、もっと精度を高めたい場合は正規表現を頑張ってみてください。

  1. 2001Y

    いつもわかりやすい記事ありがとうございます!

    2017-06-25 17:29Reply
  2. jislotz

    正規表現だけで頑張るのはしんどい。
    nodeIteratorやDOM Rangeを使うと楽かもしれない。

    2017-06-26 4:36Reply
    • 機能上完璧を求めるのでアレば必要でしょう。
      今回の機能は完璧である必要が果たしてあるのか、というところだと思います。

      2017-06-26 7:06Reply