とある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, "&").replace(/</g,"<").replace(/>/g, ">"); }; 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; } });