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

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

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

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) などにも反応してしまいます。そんなカラーコードは書かないと思いますが。

まとめ

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

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