Added Workers for handing certain expression timeout errors.

Author: wdamien

Gruntfile.js

@@ -50,7 +50,8 @@ module.exports = function (grunt) {
 			},
 			build: {
 				files: {
-					"<%= deployFolder %>js/uglify.min.js":getScripts().uglify
+					"<%= deployFolder %>js/uglify.min.js":getScripts().uglify,
+					"<%= deployFolder %>js/regExWorker.template.js":"js/regExWorker.template.js"
 				}
 			}
 		},
@@ -153,6 +154,7 @@ module.exports = function (grunt) {
 	grunt.registerTask("parse-index", function (type) {
 		var templateFile = grunt.file.read("index.html");
 		var indexJs = minifyJS(grunt.file.read("js/index.template.js"));
+
 		var buildIndexTag = "\n"+indexJs+"";
 
 		var output = grunt.template.process(templateFile, {data:{build:true, index:buildIndexTag, noCache:Date.now()}})

index.html

@@ -9,6 +9,8 @@
 
 	<meta name="description" content="Regular expression tester with syntax highlighting, contextual help, video tutorial, reference, and searchable community patterns." />
 
+	<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
+
 	<!-- Windows8 Pin to home. -->
 	<meta name="application-name" content="RegExr"/>
 	<meta name="msapplication-TileColor" content="#44A4E0"/>
@@ -23,6 +25,7 @@
 
 	<!-- Only use these tags during a build. -->
 	<!-- <% if (build) { %> -->
+	<script src="js/regExWorker.template.js?no=<%=noCache %>"></script>
 	<script src="js/scripts.min.js?no=<%=noCache %>"></script>
 	<!-- <% } else { %> -->
 	<!--
@@ -39,6 +42,7 @@
 	<script src="js/third-party/placeholders.min.js"></script>
 	<script src="js/third-party/history.adapter.native.js"></script>
 	<script src="js/third-party/history.js"></script>
+	<script src="js/RegExJS.js"></script>
 	<script src="js/events/Event.js"></script>
 	<script src="js/events/EventDispatcher.js"></script>
 	<script src="js/Tracking.js"></script>
@@ -380,7 +384,6 @@ <h1 class="icon regexr-logo">&#xE600;</h1><h1 class="regexr-text">RegExr</h1><sp
 		}
 	}
 </script>
-
 <!-- <% if (build) { %> -->
 	<script>
 		// injected on build:<%=index %>

js/RegExJS.js

@@ -0,0 +1,59 @@
+(function (scope) {
+	"use strict";
+
+	var s = {};
+
+	s.match = function (regex, str, callback) {
+		var matches = [];
+		var error = null;
+		var match = null;
+		var index = null;
+
+		if (!regex) {
+			callback(error, matches);
+			return;
+		}
+
+		if (window.Worker) {
+			if (s.worker) {
+				clearTimeout(s.id);
+				s.worker.terminate();
+			}
+
+			s.worker = new Worker("js/regExWorker.template.js");
+
+			s.worker.onmessage = function (evt) {
+				// When the worker says its loaded start a timer. (For IE 10);
+				if (evt.data == "onload") {
+					s.id = setTimeout(function () {
+						callback("timeout", matches);
+						s.worker.terminate();
+					}, 250);
+				} else {
+					matches = evt.data.matches;
+					error = evt.data.error;
+					clearTimeout(s.id);
+					callback(error, matches);
+				}
+			}
+			s.worker.postMessage({regex: regex, str: str});
+		} else {
+			while (!error) {
+				match = regex.exec(str);
+				if (!match) { break; }
+				if (regex.global && index === regex.lastIndex) {
+					error = "infinite";
+					break;
+				}
+				match.end = (index = match.index + match[0].length) - 1;
+				match.input = null;
+				matches.push(match);
+				if (!regex.global) { break; } // or it will become infinite.
+			}
+			callback(error, matches);
+		}
+	};
+
+	scope.RegExJS = s;
+
+}(window));

js/documentation.js

@@ -61,6 +61,12 @@ var library = {
 			label:"The 'infinite' error",
 			desc:"The expression can match 0 characters, and therefore matches infinitely.",
 			ext:" <h1>Example:</h1><code>.*</code> can match <code>0</code> characters, and therefore will match infinitely."
+			},
+			{
+			id:"timeout",
+			label:"The 'timeout' error",
+			desc:"The expression took longer than 250ms to execute.<br><span class='small-text'><hr>** Certain patterns can cause exponential growth, and may timeout.</span>",
+			ext:" <h1>Example:</h1> Using <code>^(a+)+$</code> to match <code>aaaaaaaaaaaaaaaaaaaaaaaaaaaaB</code> will match each 'a' an indeterminate number of times, and therefore will eventually timeout."
 			}
 		]
 		},

js/regExWorker.template.js

@@ -0,0 +1,33 @@
+onmessage = function (evt) {
+	"use strict";
+	var regex = evt.data.regex;
+	var str = evt.data.str;
+	var error = null;
+	var matches = [];
+	var match, index;
+
+	// Let the callee know we're loaded (for IE 10);
+	postMessage("onload");
+
+	if (!regex) {
+		postMessage({error: error, matches: matches});
+		self.close();
+		return;
+	}
+
+	while (!error) {
+		match = regex.exec(str);
+		if (!match) { break; }
+		if (regex.global && index === regex.lastIndex) {
+			error = "infinite";
+			break;
+		}
+		match.end = (index = match.index + match[0].length) - 1;
+		match.input = null;
+		matches.push(match);
+		if (!regex.global) { break; } // or it will become infinite.
+	}
+
+	postMessage({error: error, matches: matches});
+	self.close();
+}

js/views/DocView.js

@@ -22,7 +22,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
  */
 (function() {
-	
+
 	var DocView = function(element) {
 		this.initialize(element);
 	};
@@ -409,28 +409,24 @@ SOFTWARE.
 		catch (e) { this.error = "ERROR"; }
 		matches.length = index = 0;
 
-		while (!this.error) {
-			match = regex.exec(str);
-			if (!match) { break; }
-			if (g && index === regex.lastIndex) { this.error = "infinite"; break; }
-			match.end = (index = match.index+match[0].length)-1;
-			match.input = null;
-			matches.push(match);
-			if (!g) { break; } // or it will become infinite.
-		}
+		var _this = this;
+		RegExJS.match(regex, str, function(error, matches) {
+			_this.error = error;
+			_this.matches = matches;
 
-		this.updateResults();
-		$.defer(this, this.drawSourceHighlights, "draw");
+			_this.updateResults();
+			$.defer(_this, _this.drawSourceHighlights, "draw");
 
-		if (ExpressionModel.isDirty()) {
-			BrowserHistory.go();
-		}
+			if (ExpressionModel.isDirty()) {
+				BrowserHistory.go();
+			}
 
-		if (ExpressionModel.id) {
-			BrowserHistory.go($.createID(ExpressionModel.id));
-		}
+			if (ExpressionModel.id) {
+				BrowserHistory.go($.createID(ExpressionModel.id));
+			}
 
-		this.updateSubst(str, regex);
+			_this.updateSubst(str, regex);
+		});
 	};
 
 	p.updateSubst = function(source, regex) {

scripts.json

@@ -12,6 +12,7 @@
 		"js/third-party/placeholders.min.js",
 		"js/third-party/history.adapter.native.js",
 		"js/third-party/history.js",
+		"js/RegExJS.js",
 		"js/events/Event.js",
 		"js/events/EventDispatcher.js",
 		"js/utils/Utils.js",

scss/shared.scss

@@ -91,7 +91,7 @@
 		background: $theme-color;
 		color: $color;
 	}
-	
+
 	.item.removed {
 		text-decoration: line-through;
 		opacity: 0.5;
@@ -187,3 +187,6 @@
 	display: inline-block;
 }
 
+.small-text {
+	font-size: .7rem;
+}