とあるJSの正規表現2

部分マッチングとマッチした結果を分けるように修正した。デモ

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, "&amp;").replace(/</g,"&lt;").replace(/>/g, "&gt;");
};

RegSerch.extend({
    initialize: function(idStr, idReg, idOptG, idOptI, idOptM, idResult, idResultSub) {
	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;
	this.idResultSub = gid(idResultSub);
	
	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);
	
	this.idResultSub.innerHTML = "";
	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 self = this;
	var r = str.replace(regExp, function() {
	    var sub = [];
	    for (var i = 1; i < arguments.length - 2; i++) {
		var m = [
		    "$",
		    i,
		    "(",
		    '<b style="background: #98FB98";>',
		    arguments[i],
		    "</b>",
		    ")"
		].join("");
		sub.push(m);
	    }
	    self.idResultSub.innerHTML = sub.join(" ");
	    return [
		'<b style="background: #FFF200";>',
		arguments[0],
		"</b>"
	    ].join("");
	});
	this.idResult.innerHTML = r;
    }
});