5 export type LinkHandler = (uri: string) => void;
7 type LinkMatcher = {id: number, regex: RegExp, matchIndex?: number, handler: LinkHandler};
9 const protocolClause = '(https?:\\/\\/)';
10 const domainCharacterSet = '[\\da-z\\.-]+';
11 const negatedDomainCharacterSet = '[^\\da-z\\.-]+';
12 const domainBodyClause = '(' + domainCharacterSet + ')';
13 const tldClause = '([a-z\\.]{2,6})';
14 const ipClause = '((\\d{1,3}\\.){3}\\d{1,3})';
15 const localHostClause = '(localhost)';
16 const portClause = '(:\\d{1,5})';
17 const hostClause = '((' + domainBodyClause + '\\.' + tldClause + ')|' + ipClause + '|' + localHostClause + ')' + portClause + '?';
18 const pathClause = '(\\/[\\/\\w\\.\\-%]*)*';
19 const queryStringHashFragmentCharacterSet = '[0-9\\w\\[\\]\\(\\)\\/\\?\\!#@$%&\'*+,:;\\=\\.\\-]*';
20 const queryStringClause = '(\\?' + queryStringHashFragmentCharacterSet + ')?';
21 const hashFragmentClause = '(#' + queryStringHashFragmentCharacterSet + ')?';
22 const negatedPathCharacterSet = '[^\\/\\w\\.\\-%]+';
23 const bodyClause = hostClause + pathClause + queryStringClause + hashFragmentClause;
24 const start = '(?:^|' + negatedDomainCharacterSet + ')(';
25 const end = ')($|' + negatedPathCharacterSet + ')';
26 const strictUrlRegex = new RegExp(start + protocolClause + bodyClause + end);
29 * The ID of the built in http(s) link matcher.
31 const HYPERTEXT_LINK_MATCHER_ID = 0;
34 * The time to wait after a row is changed before it is linkified. This prevents
35 * the costly operation of searching every row multiple times, pntentially a
36 * huge aount of times.
38 const TIME_BEFORE_LINKIFY = 200;
41 * The Linkifier applies links to rows shortly after they have been refreshed.
43 export class Linkifier {
44 private _rows: HTMLElement[];
45 private _rowTimeoutIds: number[];
46 private _linkMatchers: LinkMatcher[];
47 private _nextLinkMatcherId = HYPERTEXT_LINK_MATCHER_ID;
49 constructor(rows: HTMLElement[]) {
51 this._rowTimeoutIds = [];
52 this._linkMatchers = [];
53 this.registerLinkMatcher(strictUrlRegex, null, 1);
57 * Queues a row for linkification.
58 * @param {number} rowIndex The index of the row to linkify.
60 public linkifyRow(rowIndex: number): void {
61 const timeoutId = this._rowTimeoutIds[rowIndex];
63 clearTimeout(timeoutId);
65 this._rowTimeoutIds[rowIndex] = setTimeout(this._linkifyRow.bind(this, rowIndex), TIME_BEFORE_LINKIFY);
69 * Attaches a handler for hypertext links, overriding default <a> behavior
70 * for standard http(s) links.
71 * @param {LinkHandler} handler The handler to use, this can be cleared with
74 public attachHypertextLinkHandler(handler: LinkHandler): void {
75 this._linkMatchers[HYPERTEXT_LINK_MATCHER_ID].handler = handler;
79 * Registers a link matcher, allowing custom link patterns to be matched and
81 * @param {RegExp} regex The regular expression to search for, specifically
82 * this searches the textContent of the rows. You will want to use \s to match
83 * a space ' ' character for example.
84 * @param {LinkHandler} handler The callback when the link is called.
85 * @param {number} matchIndex The index of the link from the regex.match(text)
86 * call. This defaults to 0 (for regular expressions without capture groups).
87 * @return {number} The ID of the new matcher, this can be used to deregister.
89 public registerLinkMatcher(regex: RegExp, handler: LinkHandler, matchIndex?: number): number {
90 if (this._nextLinkMatcherId !== HYPERTEXT_LINK_MATCHER_ID && !handler) {
91 throw new Error('handler cannot be falsy');
93 const matcher: LinkMatcher = {
94 id: this._nextLinkMatcherId++,
99 this._linkMatchers.push(matcher);
104 * Deregisters a link matcher if it has been registered.
105 * @param {number} matcherId The link matcher's ID (returned after register)
106 * @return {boolean} Whether a link matcher was found and deregistered.
108 public deregisterLinkMatcher(matcherId: number): boolean {
109 // ID 0 is the hypertext link matcher which cannot be deregistered
110 for (let i = 1; i < this._linkMatchers.length; i++) {
111 if (this._linkMatchers[i].id === matcherId) {
112 this._linkMatchers.splice(i, 1);
121 * @param {number} rowIndex The index of the row to linkify.
123 private _linkifyRow(rowIndex: number): void {
124 const row = this._rows[rowIndex];
128 const text = row.textContent;
129 for (let i = 0; i < this._linkMatchers.length; i++) {
130 const matcher = this._linkMatchers[i];
131 const uri = this._findLinkMatch(text, matcher.regex, matcher.matchIndex);
133 this._doLinkifyRow(rowIndex, uri, matcher.handler);
134 // Only allow a single LinkMatcher to trigger on any given row.
141 * Linkifies a row given a specific handler.
142 * @param {number} rowIndex The index of the row to linkify.
143 * @param {string} uri The uri that has been found.
144 * @param {handler} handler The handler to trigger when the link is triggered.
146 private _doLinkifyRow(rowIndex: number, uri: string, handler?: LinkHandler): void {
147 // Iterate over nodes as we want to consider text nodes
148 const nodes = this._rows[rowIndex].childNodes;
149 for (let i = 0; i < nodes.length; i++) {
150 const node = nodes[i];
151 const searchIndex = node.textContent.indexOf(uri);
152 if (searchIndex >= 0) {
153 const linkElement = this._createAnchorElement(uri, handler);
154 if (node.textContent.length === uri.length) {
155 // Matches entire string
156 if (node.nodeType === Node.TEXT_NODE) {
157 this._replaceNode(node, linkElement);
159 const element = (<HTMLElement>node);
160 if (element.nodeName === 'A') {
161 // This row has already been linkified
164 element.innerHTML = '';
165 element.appendChild(linkElement);
168 // Matches part of string
169 this._replaceNodeSubstringWithNode(node, linkElement, uri, searchIndex);
176 * Finds a link match in a piece of text.
177 * @param {string} text The text to search.
178 * @param {number} matchIndex The regex match index of the link.
179 * @return {string} The matching URI or null if not found.
181 private _findLinkMatch(text: string, regex: RegExp, matchIndex?: number): string {
182 const match = text.match(regex);
183 if (!match || match.length === 0) {
186 return match[typeof matchIndex !== 'number' ? 0 : matchIndex];
190 * Creates a link anchor element.
191 * @param {string} uri The uri of the link.
192 * @return {HTMLAnchorElement} The link.
194 private _createAnchorElement(uri: string, handler: LinkHandler): HTMLAnchorElement {
195 const element = document.createElement('a');
196 element.textContent = uri;
198 element.addEventListener('click', () => handler(uri));
201 // Force link on another tab so work is not lost
202 element.target = '_blank';
208 * Replace a node with 1 or more other nodes.
209 * @param {Node} oldNode The node to replace.
210 * @param {Node[]} newNodes The new nodes to insert in order.
212 private _replaceNode(oldNode: Node, ...newNodes: Node[]): void {
213 const parent = oldNode.parentNode;
214 for (let i = 0; i < newNodes.length; i++) {
215 parent.insertBefore(newNodes[i], oldNode);
217 parent.removeChild(oldNode);
221 * Replace a substring within a node with a new node.
222 * @param {Node} targetNode The target node; either a text node or a <span>
223 * containing a single text node.
224 * @param {Node} newNode The new node to insert.
225 * @param {string} substring The substring to replace.
226 * @param {number} substringIndex The index of the substring within the string.
228 private _replaceNodeSubstringWithNode(targetNode: Node, newNode: Node, substring: string, substringIndex: number): void {
229 let node = targetNode;
230 if (node.nodeType !== Node.TEXT_NODE) {
231 node = node.childNodes[0];
234 // The targetNode will be either a text node or a <span>. The text node
235 // (targetNode or its only-child) needs to be replaced with newNode plus new
236 // text nodes potentially on either side.
237 if (node.childNodes.length === 0 && node.nodeType !== Node.TEXT_NODE) {
238 throw new Error('targetNode must be a text node or only contain a single text node');
241 const fullText = node.textContent;
243 if (substringIndex === 0) {
244 // Replace with <newNode><textnode>
245 const rightText = fullText.substring(substring.length);
246 const rightTextNode = document.createTextNode(rightText);
247 this._replaceNode(node, newNode, rightTextNode);
248 } else if (substringIndex === targetNode.textContent.length - substring.length) {
249 // Replace with <textnode><newNode>
250 const leftText = fullText.substring(0, substringIndex);
251 const leftTextNode = document.createTextNode(leftText);
252 this._replaceNode(node, leftTextNode, newNode);
254 // Replace with <textnode><newNode><textnode>
255 const leftText = fullText.substring(0, substringIndex);
256 const leftTextNode = document.createTextNode(leftText);
257 const rightText = fullText.substring(substringIndex + substring.length);
258 const rightTextNode = document.createTextNode(rightText);
259 this._replaceNode(node, leftTextNode, newNode, rightTextNode);