TextAreaの文字色を変更

appendChildを使うと、テキストエリアにタグを挿入できるみたいです。


文字の色を変えて書き込む。

//テキストエリアのオブジェクト
var obj = document.getElementsByTagName('textarea').item(0);

//spanタグ作成
var elm = document.createElement('span');

elm.innerHTML   = 'test';
elm.style.color = '#ff8000';

obj.appendChild(elm);


置換など応用すれば、テキストエリア内の指定文字をハイライト表示させたりできますね。

var obj = document.getElementsByTagName('textarea').item(0);

var reg = new RegExp('test', 'g');

var elm       = document.createElement('span');
elm.innerHTML = obj.value.replace(reg, 'test'.fontcolor('#ff8000'));

obj.value = '';
obj.appendChild(elm);