Move HTML entity parsing from Autolinker to HtmlParser

Author: gregjacobs

Gruntfile.js

@@ -39,7 +39,7 @@ module.exports = function(grunt) {
 		jasmine: {
 			dist: {
 				options: {
-					specs: 'tests/*Spec.js'
+					specs: 'tests/**/*Spec.js'
 				},
 				src: minDistPath
 			}
@@ -59,6 +59,7 @@ module.exports = function(grunt) {
 					'src/htmlParser/HtmlParser.js',
 					'src/htmlParser/HtmlNode.js',
 					'src/htmlParser/ElementNode.js',
+					'src/htmlParser/EntityNode.js',
 					'src/htmlParser/TextNode.js',
 					'src/matchParser/MatchParser.js',
 					'src/matchParser/MatchValidator.js',

src/Autolinker.js

@@ -176,16 +176,6 @@ Autolinker.prototype = {
 	 */
 
 
-	/**
-	 * @private
-	 * @property {RegExp} htmlCharacterEntitiesRegex
-	 *
-	 * The regular expression that matches common HTML character entities.
-	 * 
-	 * Ignoring & as it could be part of a query string -- handling it separately.
-	 */
-	htmlCharacterEntitiesRegex: /( | |<|<|>|>|"|"|')/gi,
-	
 	/**
 	 * @private
 	 * @property {Autolinker.htmlParser.HtmlParser} htmlParser
@@ -231,43 +221,39 @@ Autolinker.prototype = {
 	link : function( textOrHtml ) {
 		var htmlParser = this.getHtmlParser(),
 		    htmlNodes = htmlParser.parse( textOrHtml ),
-		    htmlCharacterEntitiesRegex = this.htmlCharacterEntitiesRegex,
 		    anchorTagStackCount = 0,  // used to only process text around anchor tags, and any inner text/html they may have
 		    resultHtml = [];
 
 		for( var i = 0, len = htmlNodes.length; i < len; i++ ) {
-			var htmlNode = htmlNodes[ i ];
+			var node = htmlNodes[ i ],
+			    nodeType = node.getType(),
+			    nodeText = node.getText();
 
-			if( htmlNode.getType() === 'element' ) {
+			if( nodeType === 'element' ) {
 				// Process HTML nodes in the input `textOrHtml`
-				if( htmlNode.getTagName() === 'a' ) {
-					if( !htmlNode.isClosing() ) {  // it's the start <a> tag
+				if( node.getTagName() === 'a' ) {
+					if( !node.isClosing() ) {  // it's the start <a> tag
 						anchorTagStackCount++;
 					} else {   // it's the end </a> tag
 						anchorTagStackCount = Math.max( anchorTagStackCount - 1, 0 );  // attempt to handle extraneous </a> tags by making sure the stack count never goes below 0
 					}
 				}
-				resultHtml.push( htmlNode.getText() );  // now add the text of the tag itself verbatim
+				resultHtml.push( nodeText );  // now add the text of the tag itself verbatim
+				
+			} else if( nodeType === 'entity' ) {
+				resultHtml.push( nodeText );  // append HTML entity nodes (such as '&nbsp;') verbatim
 
 			} else {
 				// Process text nodes in the input `textOrHtml`
-				var text = htmlNode.getText();
-				
 				if( anchorTagStackCount === 0 ) {
-					// If we're not within an <a> tag, process the text node
-					var unescapedText = Autolinker.Util.splitAndCapture( text, htmlCharacterEntitiesRegex );  // split at HTML entities, but include the HTML entities in the results array
-					
-					for ( var j = 0, jlen = unescapedText.length; j < jlen; j++ ) {
-						var textToProcess = unescapedText[ j ],
-						    processedTextNode = this.doReplacements( textToProcess );
-						
-						resultHtml.push( processedTextNode );
-					}
+					// If we're not within an <a> tag, process the text node to linkify
+					var linkifiedStr = this.linkifyStr( nodeText );
+					resultHtml.push( linkifiedStr );
 
 				} else {
 					// `text` is within an <a> tag, simply append the text - we do not want to autolink anything 
 					// already within an <a>...</a> tag
-					resultHtml.push( text );
+					resultHtml.push( nodeText );
 				}
 			}
 		}
@@ -283,11 +269,11 @@ Autolinker.prototype = {
 	 * This method does the actual wrapping of URLs/emails/Twitter handles with anchor tags.
 	 * 
 	 * @private
-	 * @param {String} text The text to auto-link.
+	 * @param {String} str The string of text to auto-link.
 	 * @return {String} The text with anchor tags auto-filled.
 	 */
-	doReplacements : function( text ) {
-		return this.getMatchParser().replace( text, this.createMatchReturnVal, this );
+	linkifyStr : function( str ) {
+		return this.getMatchParser().replace( str, this.createMatchReturnVal, this );
 	},
 
 

src/htmlParser/EntityNode.js

@@ -0,0 +1,25 @@
+/*global Autolinker */
+/**
+ * @class Autolinker.htmlParser.EntityNode
+ * @extends Autolinker.htmlParser.HtmlNode
+ * 
+ * Represents a known HTML entity node that has been parsed by the {@link Autolinker.htmlParser.HtmlParser}.
+ * Ex: ' ', or '&amp#160;' (which will be retrievable from the {@link #getText} method.
+ * 
+ * Note that this class will only be returned from the HtmlParser for the set of checked HTML entity nodes 
+ * defined by the {@link Autolinker.htmlParser.HtmlParser#htmlCharacterEntitiesRegex}.
+ * 
+ * See this class's superclass ({@link Autolinker.htmlParser.HtmlNode}) for more details.
+ */
+Autolinker.htmlParser.EntityNode = Autolinker.Util.extend( Autolinker.htmlParser.HtmlNode, {
+	
+	/**
+	 * Returns a string name for the type of node that this class represents.
+	 * 
+	 * @return {String}
+	 */
+	getType : function() {
+		return 'entity';
+	}
+	
+} );

src/htmlParser/HtmlParser.js

@@ -70,6 +70,16 @@ Autolinker.htmlParser.HtmlParser = Autolinker.Util.extend( Object, {
 		].join( "" ), 'gi' );
 	} )(),
 
+	/**
+	 * @private
+	 * @property {RegExp} htmlCharacterEntitiesRegex
+	 *
+	 * The regular expression that matches common HTML character entities.
+	 * 
+	 * Ignoring & as it could be part of a query string -- handling it separately.
+	 */
+	htmlCharacterEntitiesRegex: /( | |<|<|>|>|"|"|')/gi,
+	
 
 	/**
 	 * Parses an HTML string and returns a simple array of {@link Autolinker.htmlParser.HtmlNode HtmlNodes} to represent
@@ -82,17 +92,19 @@ Autolinker.htmlParser.HtmlParser = Autolinker.Util.extend( Object, {
 		var htmlRegex = this.htmlRegex,
 		    currentResult,
 		    lastIndex = 0,
+		    textAndEntityNodes,
 		    nodes = [];  // will be the result of the method
 
 		while( ( currentResult = htmlRegex.exec( html ) ) !== null ) {
 			var tagText = currentResult[ 0 ],
-			    tagName = currentResult[ 1 ] || currentResult[ 3 ],  // The <!DOCTYPE> tag (ex: "!DOCTYPE"), or another tag (ex: "a") 
+			    tagName = currentResult[ 1 ] || currentResult[ 3 ],  // The <!DOCTYPE> tag (ex: "!DOCTYPE"), or another tag (ex: "a" or "img") 
 			    isClosingTag = !!currentResult[ 2 ],
 			    inBetweenTagsText = html.substring( lastIndex, currentResult.index );
 
-			// Push a TextNode, if there was text
+			// Push TextNodes and EntityNodes for any text found between tags
 			if( inBetweenTagsText ) {
-				nodes.push( this.createTextNode( inBetweenTagsText ) );
+				textAndEntityNodes = this.parseTextAndEntityNodes( inBetweenTagsText );
+				nodes.push.apply( nodes, textAndEntityNodes );
 			}
 
 			// Push the ElementNode
@@ -105,15 +117,44 @@ Autolinker.htmlParser.HtmlParser = Autolinker.Util.extend( Object, {
 		if( lastIndex < html.length ) {
 			var text = html.substring( lastIndex );
 
+			// Push TextNodes and EntityNodes for any text found between tags
 			if( text ) {
-				nodes.push( this.createTextNode( text ) );
+				textAndEntityNodes = this.parseTextAndEntityNodes( text );
+				nodes.push.apply( nodes, textAndEntityNodes );
 			}
 		}
 
 		return nodes;
 	},
 
 
+	/**
+	 * Parses text and HTML entity nodes from a given string. The input string should not have any HTML tags (elements)
+	 * within it.
+	 * 
+	 * @private
+	 * @param {String} text The text to parse.
+	 * @return {Autolinker.htmlParser.HtmlNode[]} An array of HtmlNodes to represent the 
+	 *   {@link Autolinker.htmlParser.TextNode TextNodes} and {@link Autolinker.htmlParser.EntityNode EntityNodes} found.
+	 */
+	parseTextAndEntityNodes : function( text ) {
+		var nodes = [],
+		    textAndEntityTokens = Autolinker.Util.splitAndCapture( text, this.htmlCharacterEntitiesRegex );  // split at HTML entities, but include the HTML entities in the results array
+		
+		// Every even numbered token is a TextNode, and every odd numbered token is an EntityNode
+		// For example: an input `text` of "Test &quot;this&quot; today" would turn into the 
+		//   `textAndEntityTokens`: [ 'Test ', '&quot;', 'this', '&quot;', ' today' ]
+		for( var i = 0, len = textAndEntityTokens.length; i < len; i += 2 ) {
+			var textToken = textAndEntityTokens[ i ],
+			    entityToken = textAndEntityTokens[ i + 1 ];
+			
+			if( textToken ) nodes.push( this.createTextNode( textToken ) );
+			if( entityToken ) nodes.push( this.createEntityNode( entityToken ) );
+		}
+		return nodes;
+	},
+	
+	
 	/**
 	 * Factory method to create an {@link Autolinker.htmlParser.ElementNode ElementNode}.
 	 * 
@@ -132,6 +173,18 @@ Autolinker.htmlParser.HtmlParser = Autolinker.Util.extend( Object, {
 	},
 
 
+	/**
+	 * Factory method to create a {@link Autolinker.htmlParser.EntityNode EntityNode}.
+	 * 
+	 * @private
+	 * @param {String} text The text that was matched for the HTML entity (such as '&amp;nbsp;').
+	 * @return {Autolinker.htmlParser.EntityNode}
+	 */
+	createEntityNode : function( text ) {
+		return new Autolinker.htmlParser.EntityNode( { text: text } );
+	},
+	
+	
 	/**
 	 * Factory method to create a {@link Autolinker.htmlParser.TextNode TextNode}.
 	 *