Synopsis
becke.ch js regular expression library:
A JavaScript Regular Expression library, extending the standard
RegExp
class with missing functionality.
A good description on JavaScript Regular Expression can be found
here (developer.mozilla.org)
and here (www.w3schools.com).
Code Example
Convert plain text to html: Replace special characters (multiple spaces, tabs, ...) in plain text with their html "equivalent":
//Convert plain text to html: Replace special characters (multiple spaces, tabs, ...) in plain text with their html "equivalent":
var CONVERT_TEXT_SPECIAL_CHARACTER_TO_HTML_ESCAPE_CHARACTER_PATTERN = "( {2})|(\t)|(&)|(<)|(>)|(\n)";
var CONVERT_TEXT_SPECIAL_CHARACTER_TO_HTML_ESCAPE_CHARACTER_PATTERN_REPLACE_STRING = [undefined, " ", " ", "&", "<", ">", "<br>"];
var str = "3 spaces:' ' followed by a tab:'\t' followed by an ampersand:'&' followed by less-than sign:'<' followed by greater-than sign:'>' followed by newline:'\n' and that's it";
var regex = new Regex(CONVERT_TEXT_SPECIAL_CHARACTER_TO_HTML_ESCAPE_CHARACTER_PATTERN, 'g');
var result = regex[Symbol.replace](str, CONVERT_TEXT_SPECIAL_CHARACTER_TO_HTML_ESCAPE_CHARACTER_PATTERN_REPLACE_STRING);
//Alternative Syntax: For browsers supporting "Symbol": Chrome & Firefox
var resultAlternative = str.replace(regex,CONVERT_TEXT_SPECIAL_CHARACTER_TO_HTML_ESCAPE_CHARACTER_PATTERN_REPLACE_STRING);
console.log(result === "3 spaces:' ' followed by a tab:' ' followed by an ampersand:'&' followed by less-than sign:'<' followed by greater-than sign:'>' followed by newline:'<br>' and that's it");Retrieve content and position of: opening-, closing tags and body content for: non-nested html-tags.
//Retrieve content and position of: opening-, closing tags and body content for: non-nested html-tags.
var pattern = '(<([^ >]+)[^>]*>)([^<]*)(<\\/\\2>)';
var str = '<html><code class="html plain">first</code><div class="content">second</div></html>';
var regex = new Regex(pattern, 'g');
var result = regex.exec(str);
console.log(5 === result.length);
console.log('<code class="html plain">first</code>'=== result[0]);
console.log('<code class="html plain">'=== result[1]);
console.log('first'=== result[3]);
console.log('</code>'=== result[4]);
console.log(5=== result.index.length);
console.log(6=== result.index[0]);
console.log(6=== result.index[1]);
console.log(31=== result.index[3]);
console.log(36=== result.index[4]);
result = regex.exec(str);
console.log(5=== result.length);
console.log('<div class="content">second</div>'=== result[0]);
console.log('<div class="content">'=== result[1]);
console.log('second'=== result[3]);
console.log('</div>'=== result[4]);
console.log(5=== result.index.length);
console.log(43=== result.index[0]);
console.log(43=== result.index[1]);
console.log(64=== result.index[3]);
console.log(70=== result.index[4]);Motivation
Regular Expression Group Based Search & Replace: Main motivation was to find a solution for a regular expression group based search and replace. Instead of just providing a single replacement string for the entire match we can provide an array of replacement strings for each matching group. This method (string.replace(new Regex(pattern, 'g'),[undefined, replaceStringGroup1, ...])) smoothly extends the standard JavaScript replace functionality (string.replace(new RegExp(pattern, 'g'),replaceStringGroup0).
In addition to solve this problem the standard exec function of RegExp need to be extended to provide indexes for each
matching group which automatically provided a fix respective solution to the following problem:
"How to find indices of groups in JavaScript regular expressions match?".
Installation
HTML: becke.ch js regular expression library download
<html lang="en">
<head>
<script language="JavaScript" src="../src/becke-ch--regex--s0-0-v1--base--pl--lib.js" type="text/javascript"></script>
...
<script language="JavaScript">
<!--
var pattern = '(<([^ >]+)[^>]*>)([^<]*)(<\\/\\2>)';
var regex = new Regex(pattern, 'g');
...
//-->
</script>
</head>
<body>
...
</body>
</html>Node.js & NPM: becke.ch js npm regular expression library download
package.json
"dependencies": { "becke-ch--regex--s0-0-v1--base--pl--lib": "latest" }
javascript:
var Regex = require('becke-ch--regex--s0-0-v1--base--pl--lib');
var pattern = '(<([^ >]+)[^>]*>)([^<]*)(<\\/\\2>)';
var regex = new Regex(pattern, 'g');
...Angular 2 & Typescript: becke.ch js npm regular expression library download
package.json
"dependencies": { "becke-ch--regex--s0-0-v1--base--pl--lib": "latest" }
Create typings file: src/app/custom.typings.d.ts:
declare module 'Regex'Import typings file into: src/main.ts:
///<reference path="./app/custom.typings.d.ts"/>
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);Map Declaration in: src/systemjs.config.js:
(function (global) {
System.config({
paths: {
...
},
// map tells the System loader where to look for things
map: {
// private libraries
'Regex': 'npm:becke-ch--regex--s0-0-v1--base--pl--lib/src/becke-ch--regex--s0-0-v1--base--pl--lib.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
...
}
});
})(this);typescript: src/app/app.component.ts: Important is to set the array-of-replacement-strings to type "any" otherwise the typescript will not compile because originally replace only supports one replacement string for the entire match and not as we have it in this enhanced version an array of replacement strings for each matching group:
import * as Regex from 'Regex';
export class AppComponent {
replaceClicked() {
var str: string;
var pattern: string;
var flags: string;
var replacementStringArray: any;
//str.replace(new Regex(pattern, flags), replacementStringArray);
(new Regex(pattern, flags))[Symbol.replace](str, replacementStringArray);
}
}API Reference
Tests
OR
Once you've done the installation you can run (hundreds of) Unit (Mocha) tests with:
npm testOR alternatively
You can run these tests as follows:
cd test
../node_modules/mocha/bin/mocha becke-ch--regex--s0-0-v1--base--pl--lib--test.jsChangelog (Version History)
The changelog information can be found here.