XRegExp 0.2: Now With Named Capture


Posted in Javascript onNovember 30, 2007

Update: A beta version of XRegExp 0.3 is now available as part of the RegexPal download package.

JavaScript's regular expression flavor doesn't support named capture. Well, says who? XRegExp 0.2 brings named capture support, along with several other new features. But first of all, if you haven't seen the previous version, make sure to check out my post on XRegExp 0.1, because not all of the documentation is repeated below.

Highlights

  • Comprehensive named capture support (New)
  • Supports regex literals through the addFlags method (New)
  • Free-spacing and comments mode (x)
  • Dot matches all mode (s)
  • Several other minor improvements over v0.1

Named capture

There are several different syntaxes in the wild for named capture. I've compiled the following table based on my understanding of the regex support of the libraries in question. XRegExp's syntax is included at the top.

Library Capture Backreference In replacement Stored at
XRegExp (…) \k ${name} result.name
.NET (?…) (?'name'…) \k \k'name' ${name} Matcher.Groups('name')
Perl 5.10 (beta) (?…) (?'name'…) \k \k'name' \g{name} $+{name} ??
Python (?P…) (?P=name) \g result.group('name')
PHP preg (PCRE) (.NET, Perl, and Python styles) $regs['name'] $result['name']

No other major regex library currently supports named capture, although the JGsoft engine (used by products like RegexBuddy) supports both .NET and Python syntax. XRegExp does not use a question mark at the beginning of a named capturing group because that would prevent it from being used in regex literals (JavaScript would immediately throw an "invalid quantifier" error).

XRegExp supports named capture on an on-request basis. You can add named capture support to any regex though the use of the new "k" flag. This is done for compatibility reasons and to ensure that regex compilation time remains as fast as possible in all situations.

Following are several examples of using named capture:

// Add named capture support using the XRegExp constructor
var repeatedWords = new XRegExp("\\b (<word> \\w+ ) \\s+ \\k<word> \\b", "gixk");

// Add named capture support using RegExp, after overriding the native constructor
XRegExp.overrideNative();
var repeatedWords = new RegExp("\\b (<word> \\w+ ) \\s+ \\k<word> \\b", "gixk");

// Add named capture support to a regex literal
var repeatedWords = /\b (<word> \w+ ) \s+ \k<word> \b/.addFlags("gixk");

var data = "The the test data.";

// Check if data contains repeated words
var hasDuplicates = repeatedWords.test(data);
// hasDuplicates: true

// Use the regex to remove repeated words
var output = data.replace(repeatedWords, "${word}");
// output: "The test data."

In the above code, I've also used the x flag provided by XRegExp, to improve readability. Note that the addFlags method can be called multiple times on the same regex (e.g., /pattern/g.addFlags("k").addFlags("s")), but I'd recommend adding all flags in one shot, for efficiency.

Here are a few more examples of using named capture, with an overly simplistic URL-matching regex (for comprehensive URL parsing, see parseUri):

var url = "http://microsoft.com/path/to/file?q=1";
var urlParser = new XRegExp("^(<protocol>[^:/?]+)://(<host>[^/?]*)(<path>[^?]*)\\?(<query>.*)", "k");
var parts = urlParser.exec(url);
/* The result:
parts.protocol: "http"
parts.host: "microsoft.com"
parts.path: "/path/to/file"
parts.query: "q=1" */

// Named backreferences are also available in replace() callback functions as properties of the first argument
var newUrl = url.replace(urlParser, function(match){
	return match.replace(match.host, "yahoo.com");
});
// newUrl: "http://yahoo.com/path/to/file?q=1"

Note that XRegExp's named capture functionality does not support deprecated JavaScript features including the lastMatch property of the global RegExp object and the RegExp.prototype.compile() method.

Singleline (s) and extended (x) modes

The other non-native flags XRegExp supports are s (singleline) for "dot matches all" mode, and x (extended) for "free-spacing and comments" mode. For full details about these modifiers, see the FAQ in my XRegExp 0.1 post. However, one difference from the previous version is that XRegExp 0.2, when using the x flag, now allows whitespace between a regex token and its quantifier (quantifiers are, e.g., +, *?, or {1,3}). Although the previous version's handling/limitation in this regard was documented, it was atypical compared to other regex libraries. This has been fixed.

The code

/* XRegExp 0.2.2; MIT License
By Steven Levithan <http://stevenlevithan.com>
----------
Adds support for the following regular expression features:
- Free-spacing and comments ("x" flag)
- Dot matches all ("s" flag)
- Named capture ("k" flag)
 - Capture: (<name>...)
 - Backreference: \k<name>
 - In replacement: ${name}
 - Stored at: result.name
*/

/* Protect this from running more than once, which would break its references to native functions */
if (window.XRegExp === undefined) {
	var XRegExp;
	
	(function () {
		var native = {
			RegExp: RegExp,
			exec: RegExp.prototype.exec,
			match: String.prototype.match,
			replace: String.prototype.replace
		};
		
		XRegExp = function (pattern, flags) {
			return native.RegExp(pattern).addFlags(flags);
		};
		
		RegExp.prototype.addFlags = function (flags) {
			var pattern = this.source,
				useNamedCapture = false,
				re = XRegExp._re;
			
			flags = (flags || "") + native.replace.call(this.toString(), /^[\S\s]+\//, "");
			
			if (flags.indexOf("x") > -1) {
				pattern = native.replace.call(pattern, re.extended, function ($0, $1, $2) {
					return $1 ? ($2 ? $2 : "(?:)") : $0;
				});
			}
			
			if (flags.indexOf("k") > -1) {
				var captureNames = [];
				pattern = native.replace.call(pattern, re.capturingGroup, function ($0, $1) {
					if (/^\((?!\?)/.test($0)) {
						if ($1) useNamedCapture = true;
						captureNames.push($1 || null);
						return "(";
					} else {
						return $0;
					}
				});
				if (useNamedCapture) {
					/* Replace named with numbered backreferences */
					pattern = native.replace.call(pattern, re.namedBackreference, function ($0, $1, $2) {
						var index = $1 ? captureNames.indexOf($1) : -1;
						return index > -1 ? "\\" + (index + 1).toString() + ($2 ? "(?:)" + $2 : "") : $0;
					});
				}
			}
			
			/* If "]" is the leading character in a character class, replace it with "\]" for consistent
			cross-browser handling. This is needed to maintain correctness without the aid of browser sniffing
			when constructing the regexes which deal with character classes. They treat a leading "]" within a
			character class as a non-terminating, literal character, which is consistent with IE, .NET, Perl,
			PCRE, Python, Ruby, JGsoft, and most other regex engines. */
			pattern = native.replace.call(pattern, re.characterClass, function ($0, $1) {
				/* This second regex is only run when a leading "]" exists in the character class */
				return $1 ? native.replace.call($0, /^(\[\^?)]/, "$1\\]") : $0;
			});
			
			if (flags.indexOf("s") > -1) {
				pattern = native.replace.call(pattern, re.singleline, function ($0) {
					return $0 === "." ? "[\\S\\s]" : $0;
				});
			}
			
			var regex = native.RegExp(pattern, native.replace.call(flags, /[sxk]+/g, ""));
			
			if (useNamedCapture) {
				regex._captureNames = captureNames;
			/* Preserve capture names if adding flags to a regex which has already run through addFlags("k") */
			} else if (this._captureNames) {
				regex._captureNames = this._captureNames.valueOf();
			}
			
			return regex;
		};
		
		String.prototype.replace = function (search, replacement) {
			/* If search is not a regex which uses named capturing groups, just run the native replace method */
			if (!(search instanceof native.RegExp && search._captureNames)) {
				return native.replace.apply(this, arguments);
			}
			
			if (typeof replacement === "function") {
				return native.replace.call(this, search, function () {
					/* Convert arguments[0] from a string primitive to a string object which can store properties */
					arguments[0] = new String(arguments[0]);
					/* Store named backreferences on the first argument before calling replacement */
					for (var i = 0; i < search._captureNames.length; i++) {
						if (search._captureNames[i]) arguments[0][search._captureNames[i]] = arguments[i + 1];
					}
					return replacement.apply(window, arguments);
				});
			} else {
				return native.replace.call(this, search, function () {
					var args = arguments;
					return native.replace.call(replacement, XRegExp._re.replacementVariable, function ($0, $1, $2) {
						/* Numbered backreference or special variable */
						if ($1) {
							switch ($1) {
								case "$": return "$";
								case "&": return args[0];
								case "`": return args[args.length - 1].substring(0, args[args.length - 2]);
								case "'": return args[args.length - 1].substring(args[args.length - 2] + args[0].length);
								/* Numbered backreference */
								default:
									/* What does "$10" mean?
									- Backreference 10, if at least 10 capturing groups exist
									- Backreference 1 followed by "0", if at least one capturing group exists
									- Else, it's the string "$10" */
									var literalNumbers = "";
									$1 = +$1; /* Cheap type-conversion */
									while ($1 > search._captureNames.length) {
										literalNumbers = $1.toString().match(/\d$/)[0] + literalNumbers;
										$1 = Math.floor($1 / 10); /* Drop the last digit */
									}
									return ($1 ? args[$1] : "$") + literalNumbers;
							}
						/* Named backreference */
						} else if ($2) {
							/* What does "${name}" mean?
							- Backreference to named capture "name", if it exists
							- Else, it's the string "${name}" */
							var index = search._captureNames.indexOf($2);
							return index > -1 ? args[index + 1] : $0;
						} else {
							return $0;
						}
					});
				});
			}
		};
		
		RegExp.prototype.exec = function (str) {
			var result = native.exec.call(this, str);
			if (!(this._captureNames && result && result.length > 1)) return result;
			
			for (var i = 1; i < result.length; i++) {
				var name = this._captureNames[i - 1];
				if (name) result[name] = result[i];
			}
			
			return result;
		};
		
		String.prototype.match = function (regexp) {
			if (!regexp._captureNames || regexp.global) return native.match.call(this, regexp);
			return regexp.exec(this);
		};
	})();
}

/* Regex syntax parsing with support for escapings, character classes, and various other context and cross-browser issues */
XRegExp._re = {
	extended: /(?:[^[#\s\\]+|\\(?:[\S\s]|$)|\[\^?]?(?:[^\\\]]+|\\(?:[\S\s]|$))*]?)+|(\s*#[^\n\r]*\s*|\s+)([?*+]|{\d+(?:,\d*)?})?/g,
	singleline: /(?:[^[\\.]+|\\(?:[\S\s]|$)|\[\^?]?(?:[^\\\]]+|\\(?:[\S\s]|$))*]?)+|\./g,
	characterClass: /(?:[^\\[]+|\\(?:[\S\s]|$))+|\[\^?(]?)(?:[^\\\]]+|\\(?:[\S\s]|$))*]?/g,
	capturingGroup: /(?:[^[(\\]+|\\(?:[\S\s]|$)|\[\^?]?(?:[^\\\]]+|\\(?:[\S\s]|$))*]?|\((?=\?))+|\((?:<([$\w]+)>)?/g,
	namedBackreference: /(?:[^\\[]+|\\(?:[^k]|$)|\[\^?]?(?:[^\\\]]+|\\(?:[\S\s]|$))*]?|\\k(?!<[$\w]+>))+|\\k<([$\w]+)>(\d*)/g,
	replacementVariable: /(?:[^$]+|\$(?![1-9$&`']|{[$\w]+}))+|\$(?:([1-9]\d*|[$&`'])|{([$\w]+)})/g
};

XRegExp.overrideNative = function () {
	/* Override the global RegExp constructor/object with the XRegExp constructor. This precludes accessing
	properties of the last match via the global RegExp object. However, those properties are deprecated as
	of JavaScript 1.5, and the values are available on RegExp instances or via RegExp/String methods. It also
	affects the result of (/x/.constructor == RegExp) and (/x/ instanceof RegExp), so use with caution. */
	RegExp = XRegExp;
};

/* indexOf method from Mootools 1.11; MIT License */
Array.prototype.indexOf = Array.prototype.indexOf || function (item, from) {
	var len = this.length;
	for (var i = (from < 0) ? Math.max(0, len + from) : from || 0; i < len; i++) {
		if (this[i] === item) return i;
	}
	return -1;
};

You can download it, or get the packed version (2.7 KB).

XRegExp has been tested in IE 5.5?7, Firefox 2.0.0.4, Opera 9.21, Safari 3.0.2 beta for Windows, and Swift 0.2.

Finally, note that the XRE object from v0.1 has been removed. XRegExp now only creates one global variable: XRegExp. To permanently override the native RegExp constructor/object, you can now run XRegExp.overrideNative();

Javascript 相关文章推荐
javascript json2 使用方法
Mar 16 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 Javascript
js函数名与form表单元素同名冲突的问题
Mar 07 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 Javascript
vue + socket.io实现一个简易聊天室示例代码
Mar 06 Javascript
用vue和node写的简易购物车实现
Apr 25 Javascript
如何从零开始利用js手写一个Promise库详解
Apr 19 Javascript
Vue.js图片预览插件使用详解
Aug 27 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
May 30 Javascript
为什么node.js不适合大型项目
Apr 28 Javascript
javascript数组组合成字符串的脚本
Jan 06 #Javascript
比较简单的一个符合web标准的JS调用flash方法
Nov 29 #Javascript
css图片自适应大小
Nov 28 #Javascript
javascript下有关dom以及xml节点访问兼容问题
Nov 26 #Javascript
asp javascript 实现关闭窗口时保存数据的办法
Nov 24 #Javascript
javascript实现的动态添加表单元素input,button等(appendChild)
Nov 24 #Javascript
用js查找法实现当前栏目的高亮显示的代码
Nov 24 #Javascript
You might like
php笔记之:数据类型与常量的使用分析
2013/05/14 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
关于JS变量和作用域详解
2016/07/28 Javascript
微信小程序 Nginx环境配置详细介绍
2017/02/14 Javascript
几行js代码实现自适应
2017/02/24 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
jQuery获取复选框选中的当前行的某个字段的值
2017/09/15 jQuery
微信小程序 POST请求的实例详解
2017/09/29 Javascript
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
vue.js实现只弹一次弹框
2018/01/29 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
基于vue实现移动端圆形旋钮插件效果
2018/11/28 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
layui关闭层级、简单监听的实例
2019/09/06 Javascript
利用JavaScript为句子加标题的3种方法示例
2021/01/05 Javascript
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
Django中的CBV和FBV示例介绍
2018/02/25 Python
python入门前的第一课 python怎样入门
2018/03/06 Python
python自动化生成IOS的图标
2018/11/13 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
tensorflow的计算图总结
2020/01/12 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
python3 googletrans超时报错问题及翻译工具优化方案 附源码
2020/12/23 Python
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
大学生个人推荐信范文
2013/11/25 职场文书
企事业单位求职者的自我评价
2013/12/28 职场文书
感谢信怎么写
2015/01/21 职场文书
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js