正規表現にマッチした物をハイライトする。デモ
var Class = {};
Class.create = function() {
var cl = function() {
this.initialize.apply(this, arguments);
};
cl.extend = function(method) {
for (var i in method) {
this.prototype[i] = method[i];
}
return this;
};
return cl;
};
var RegSerch = Class.create();
RegSerch.addEvent = function(obj, type, func) {
obj.addEventListener ?
obj.addEventListener(type, func, false) :
obj.attachEvent("on" + type, func);
};
RegSerch.escape = function(v) {
return v.replace(/&/g, "&").replace(/</g,"<").replace(/>/g, ">");
};
RegSerch.extend({
initialize: function(idStr, idReg, idOptG, idOptI, idOptM, idResult) {
var gid = function(id) {
return document.getElementById(id);
};
var self = this;
this.idStr = gid(idStr);
this.idReg = gid(idReg);
this.idResult = gid(idResult);
this.idResult.innerHTML = this.idStr.value;
RegSerch.addEvent(this.idStr, "keyup", function() {
self.serch();
});
RegSerch.addEvent(this.idReg, "keyup", function() {
self.serch();
});
this.optG = 0;
this.optI = 0;
this.optM = 0;
RegSerch.addEvent(gid(idOptG), "click", function() {
self.optG ^= 1;
self.serch();
});
RegSerch.addEvent(gid(idOptI), "click", function() {
self.optI ^= 1;
self.serch();
});
RegSerch.addEvent(gid(idOptM), "click", function() {
self.optM ^= 1;
self.serch();
});
this.serch();
},
getOption: function() {
return [this.optG ? "g" : "",
this.optI ? "i" : "",
this.optM ? "m" : ""].join("");
},
serch: function() {
var str = RegSerch.escape(this.idStr.value);
var reg = RegSerch.escape(this.idReg.value);
if (str == "" || reg == "") {
this.idResult.innerHTML = str;
return;
}
var opt = this.getOption();
try {
var regExp = new RegExp(reg, opt);
} catch (e) {
this.idResult.innerHTML = str;
return;
}
var r = str.replace(regExp, function() {
var r = [];
var begin = (arguments.length == 3) ? 0 : 1;
for (var i = begin; i < arguments.length - 2; i++) {
var m = [
'<b style="background: ',
begin ? ((i % 2) ? "#FFF200" : "#98FB98") : "#FFF200",
';">',
begin ? "$" + i + "(" : "",
arguments[i],
begin ? ")" : "",
"</b>"
].join("");
r.push(m);
}
return r.join("");
});
this.idResult.innerHTML = r;
}
});