Merge pull request #125 from SoapBox/ignore-tags

Ignore tags option

src/linkify-element.js

@@ -92,8 +92,10 @@ function linkifyElementHelper(element, opts, doc) {
 		throw new Error(`Cannot linkify ${element} - Invalid DOM Node type`);
 	}
 
+	let ignoreTags = opts.ignoreTags;
+
 	// Is this element already a link?
-	if (element.tagName === 'A' /*|| element.hasClass('linkified')*/) {
+	if (element.tagName === 'A' || ignoreTags.indexOf(element.tagName) >= 0) {
 		// No need to linkify
 		return element;
 	}

src/linkify-html.js

@@ -22,11 +22,16 @@ export default function linkifyHtml(str, opts={}) {
 	for (i = 0; i < tokens.length; i++) {
 		let token = tokens[i];
 
-		if (token.type === StartTag && token.tagName.toUpperCase() === 'A') {
-			// Ignore all the contents of an anchor tag
+		if (token.type === StartTag) {
 			linkifiedTokens.push(token);
+
+			// Ignore all the contents of ignored tags
+			let tagName = token.tagName.toUpperCase();
+			let isIgnored = tagName === 'A' || opts.ignoreTags.indexOf(tagName) >= 0;
+			if (!isIgnored) continue;
+
 			let preskipLen = linkifiedTokens.length;
-			skipTagTokens('A', tokens, ++i, linkifiedTokens);
+			skipTagTokens(tagName, tokens, ++i, linkifiedTokens);
 			i += linkifiedTokens.length - preskipLen - 1;
 			continue;
 

src/linkify-jquery.js

@@ -60,6 +60,7 @@ function apply($, doc=null) {
 				target:				data.linkifyTarget,
 				linkClass:			data.linkifyLinkclass,
 				validate:			data.linkifyValidate,
+				ignoreTags:			data.linkifyIgnoreTags
 			};
 			let $target = target === 'this' ? $this : $this.find(target);
 			$target.linkify(options);

src/linkify/utils/options.js

@@ -13,6 +13,13 @@ function typeToTarget(href, type) {
 function normalize(opts) {
 	opts = opts || {};
 	let newLine = opts.newLine || false; // deprecated
+	let ignoreTags = opts.ignoreTags || [];
+
+	// Make all tags names upper case
+	for (var i = 0; i < ignoreTags.length; i++) {
+		ignoreTags[i] = ignoreTags[i].toUpperCase();
+	}
+
 	return {
 		attributes:			opts.linkAttributes			|| null,
 		defaultProtocol:	opts.defaultProtocol		|| 'http',
@@ -24,7 +31,8 @@ function normalize(opts) {
 		nl2br:				!!newLine	|| opts.nl2br	|| false,
 		tagName:			opts.tagName				|| 'a',
 		target:				opts.target					|| typeToTarget,
-		linkClass:			opts.linkClass				|| 'linkified'
+		linkClass:			opts.linkClass				|| 'linkified',
+		ignoreTags:			ignoreTags
 	};
 }
 

test/qunit/test/main.js

@@ -105,7 +105,8 @@ QUnit.test('returns in the hash of default options when given an empty object',
 		nl2br: false,
 		tagName: 'a',
 		target: function () {},
-		linkClass: 'linkified'
+		linkClass: 'linkified',
+		ignoreTags: []
 	});
 	assert.equal(typeof result.format, 'function');
 	assert.equal(typeof result.validate, 'function');

test/spec/html/linkified-alt.html

@@ -1,4 +1,4 @@
-Hello here are some links to <a href="ftp://awesome.com/?where=this" class="linkified" target="_blank" rel="nofollow">ftp://awesome.com/?where=this</a> and <a href="http://localhost:8080" class="linkified" target="_blank" rel="nofollow">localhost:8080</a>, pretty neat right? <p>Here's a nested <a href="http://github.com/SoapBox/linkifyjs" class="linkified" target="_blank" rel="nofollow">github.com/SoapBox/linkifyjs</a> paragraph</p> and another link to <a href="http://www.google.com" class="linkified" target="_blank" rel="nofollow">www.google.com</a>
-Hello here are some links to <a rel="nofollow" target="_blank" class="linkified" href="ftp://awesome.com/?where=this">ftp://awesome.com/?where=this</a> and <a rel="nofollow" target="_blank" class="linkified" href="http://localhost:8080">localhost:8080</a>, pretty neat right? <p>Here's a nested <a rel="nofollow" target="_blank" class="linkified" href="http://github.com/SoapBox/linkifyjs">github.com/SoapBox/linkifyjs</a> paragraph</p> and another link to <a href="http://www.google.com" class="linkified" target="_blank" rel="nofollow">www.google.com</a>
-Hello here are some links to <a class="linkified" href="ftp://awesome.com/?where=this" target="_blank" rel="nofollow">ftp://awesome.com/?where=this</a> and <a class="linkified" href="http://localhost:8080" target="_blank" rel="nofollow">localhost:8080</a>, pretty neat right? <p>Here's a nested <a class="linkified" href="http://github.com/SoapBox/linkifyjs" target="_blank" rel="nofollow">github.com/SoapBox/linkifyjs</a> paragraph</p> and another link to <a href="http://www.google.com" class="linkified" target="_blank" rel="nofollow">www.google.com</a>
-Hello here are some links to <a class="linkified" href="ftp://awesome.com/?where=this" rel="nofollow" target="_blank">ftp://awesome.com/?where=this</a> and <a class="linkified" href="http://localhost:8080" rel="nofollow" target="_blank">localhost:8080</a>, pretty neat right? <p>Here's a nested <a class="linkified" href="http://github.com/SoapBox/linkifyjs" rel="nofollow" target="_blank">github.com/SoapBox/linkifyjs</a> paragraph</p> and another link to <a href="http://www.google.com" class="linkified" target="_blank" rel="nofollow">www.google.com</a>
+Hello here are some links to <a href="ftp://awesome.com/?where=this" class="linkified" target="_blank" rel="nofollow">ftp://awesome.com/?where=this</a> and <a href="http://localhost:8080" class="linkified" target="_blank" rel="nofollow">localhost:8080</a>, pretty neat right? <p>Here's a nested <a href="http://github.com/SoapBox/linkifyjs" class="linkified" target="_blank" rel="nofollow">github.com/SoapBox/linkifyjs</a> paragraph</p> and another link to <a href="http://www.google.com" class="linkified" target="_blank" rel="nofollow">www.google.com</a> and a <script>var obj = {}; obj.com = "hi"</script>
+Hello here are some links to <a rel="nofollow" target="_blank" class="linkified" href="ftp://awesome.com/?where=this">ftp://awesome.com/?where=this</a> and <a rel="nofollow" target="_blank" class="linkified" href="http://localhost:8080">localhost:8080</a>, pretty neat right? <p>Here's a nested <a rel="nofollow" target="_blank" class="linkified" href="http://github.com/SoapBox/linkifyjs">github.com/SoapBox/linkifyjs</a> paragraph</p> and another link to <a href="http://www.google.com" class="linkified" target="_blank" rel="nofollow">www.google.com</a> and a <script>var obj = {}; obj.com = "hi"</script>
+Hello here are some links to <a class="linkified" href="ftp://awesome.com/?where=this" target="_blank" rel="nofollow">ftp://awesome.com/?where=this</a> and <a class="linkified" href="http://localhost:8080" target="_blank" rel="nofollow">localhost:8080</a>, pretty neat right? <p>Here's a nested <a class="linkified" href="http://github.com/SoapBox/linkifyjs" target="_blank" rel="nofollow">github.com/SoapBox/linkifyjs</a> paragraph</p> and another link to <a href="http://www.google.com" class="linkified" target="_blank" rel="nofollow">www.google.com</a> and a <script>var obj = {}; obj.com = "hi"</script>
+Hello here are some links to <a class="linkified" href="ftp://awesome.com/?where=this" rel="nofollow" target="_blank">ftp://awesome.com/?where=this</a> and <a class="linkified" href="http://localhost:8080" rel="nofollow" target="_blank">localhost:8080</a>, pretty neat right? <p>Here's a nested <a class="linkified" href="http://github.com/SoapBox/linkifyjs" rel="nofollow" target="_blank">github.com/SoapBox/linkifyjs</a> paragraph</p> and another link to <a href="http://www.google.com" class="linkified" target="_blank" rel="nofollow">www.google.com</a> and a <script>var obj = {}; obj.com = "hi"</script>

test/spec/html/linkified-validate.html

@@ -1,3 +1,3 @@
-Hello here are some links to <a href="ftp://awesome.com/?where=this" class="linkified" target="_blank">ftp://awesome.com/?where=this</a> and localhost:8080, pretty neat right? <p>Here's a nested github.com/SoapBox/linkifyjs paragraph</p> and another link to <a href="http://www.google.com" class="linkified" target="_blank">www.google.com</a>
-Hello here are some links to <a href="ftp://awesome.com/?where=this" class="linkified" target="_blank">ftp://awesome.com/?where=this</a> and localhost:8080, pretty neat right? <p>Here's a nested github.com/SoapBox/linkifyjs paragraph</p> and another link to <a href="http://www.google.com" class="linkified" target="_blank">www.google.com</a>
-Hello here are some links to <a href="ftp://awesome.com/?where=this" class="linkified" target="_blank">ftp://awesome.com/?where=this</a> and localhost:8080, pretty neat right? <p>Here's a nested github.com/SoapBox/linkifyjs paragraph</p> and another link to <a href="http://www.google.com" class="linkified" target="_blank">www.google.com</a>
+Hello here are some links to <a href="ftp://awesome.com/?where=this" class="linkified" target="_blank">ftp://awesome.com/?where=this</a> and localhost:8080, pretty neat right? <p>Here's a nested github.com/SoapBox/linkifyjs paragraph</p> and another link to <a href="http://www.google.com" class="linkified" target="_blank">www.google.com</a> and a <script>var obj = {}; obj.com = "hi"</script>
+Hello here are some links to <a href="ftp://awesome.com/?where=this" class="linkified" target="_blank">ftp://awesome.com/?where=this</a> and localhost:8080, pretty neat right? <p>Here's a nested github.com/SoapBox/linkifyjs paragraph</p> and another link to <a href="http://www.google.com" class="linkified" target="_blank">www.google.com</a> and a <script>var obj = {}; obj.com = "hi"</script>
+Hello here are some links to <a href="ftp://awesome.com/?where=this" class="linkified" target="_blank">ftp://awesome.com/?where=this</a> and localhost:8080, pretty neat right? <p>Here's a nested github.com/SoapBox/linkifyjs paragraph</p> and another link to <a href="http://www.google.com" class="linkified" target="_blank">www.google.com</a> and a <script>var obj = {}; obj.com = "hi"</script>

test/spec/html/linkified.html

@@ -1,3 +1,3 @@
-Hello here are some links to <a href="ftp://awesome.com/?where=this" class="linkified" target="_blank">ftp://awesome.com/?where=this</a> and <a href="http://localhost:8080" class="linkified" target="_blank">localhost:8080</a>, pretty neat right? <p>Here's a nested <a href="http://github.com/SoapBox/linkifyjs" class="linkified" target="_blank">github.com/SoapBox/linkifyjs</a> paragraph</p> and another link to <a href="http://www.google.com" class="linkified" target="_blank">www.google.com</a>
-Hello here are some links to <a target="_blank" class="linkified" href="ftp://awesome.com/?where=this">ftp://awesome.com/?where=this</a> and <a target="_blank" class="linkified" href="http://localhost:8080">localhost:8080</a>, pretty neat right? <p>Here's a nested <a target="_blank" class="linkified" href="http://github.com/SoapBox/linkifyjs">github.com/SoapBox/linkifyjs</a> paragraph</p> and another link to <a href="http://www.google.com" class="linkified" target="_blank">www.google.com</a>
-Hello here are some links to <a class="linkified" href="ftp://awesome.com/?where=this" target="_blank">ftp://awesome.com/?where=this</a> and <a class="linkified" href="http://localhost:8080" target="_blank">localhost:8080</a>, pretty neat right? <p>Here's a nested <a class="linkified" href="http://github.com/SoapBox/linkifyjs" target="_blank">github.com/SoapBox/linkifyjs</a> paragraph</p> and another link to <a href="http://www.google.com" class="linkified" target="_blank">www.google.com</a>
+Hello here are some links to <a href="ftp://awesome.com/?where=this" class="linkified" target="_blank">ftp://awesome.com/?where=this</a> and <a href="http://localhost:8080" class="linkified" target="_blank">localhost:8080</a>, pretty neat right? <p>Here's a nested <a href="http://github.com/SoapBox/linkifyjs" class="linkified" target="_blank">github.com/SoapBox/linkifyjs</a> paragraph</p> and another link to <a href="http://www.google.com" class="linkified" target="_blank">www.google.com</a> and a <script>var obj = {}; <a href="http://obj.com" class="linkified" target="_blank">obj.com</a> = "hi"</script>
+Hello here are some links to <a target="_blank" class="linkified" href="ftp://awesome.com/?where=this">ftp://awesome.com/?where=this</a> and <a target="_blank" class="linkified" href="http://localhost:8080">localhost:8080</a>, pretty neat right? <p>Here's a nested <a target="_blank" class="linkified" href="http://github.com/SoapBox/linkifyjs">github.com/SoapBox/linkifyjs</a> paragraph</p> and another link to <a href="http://www.google.com" class="linkified" target="_blank">www.google.com</a> and a <script>var obj = {}; <a target="_blank" class="linkified" href="http://obj.com">obj.com</a> = "hi"</script>
+Hello here are some links to <a class="linkified" href="ftp://awesome.com/?where=this" target="_blank">ftp://awesome.com/?where=this</a> and <a class="linkified" href="http://localhost:8080" target="_blank">localhost:8080</a>, pretty neat right? <p>Here's a nested <a class="linkified" href="http://github.com/SoapBox/linkifyjs" target="_blank">github.com/SoapBox/linkifyjs</a> paragraph</p> and another link to <a href="http://www.google.com" class="linkified" target="_blank">www.google.com</a> and a <script>var obj = {}; <a class="linkified" href="http://obj.com" target="_blank">obj.com</a> = "hi"</script>

test/spec/html/options.js

@@ -29,12 +29,17 @@ module.exports = {
 			mouseover: function () {
 				throw 'Hovered!';
 			}
-		}
+		},
+		ignoreTags: [
+			'script',
+			'style'
+		]
 	},
 
 	validateOptions: {
 		validate: function (text, type) {
 			return type !== 'url' || /^(http|ftp)s?:\/\//.test(text) || text.slice(0,3) === 'www';
 		}
 	}
+
 };

test/spec/html/original.html

@@ -1 +1 @@
-Hello here are some links to ftp://awesome.com/?where=this and localhost:8080, pretty neat right? <p>Here's a nested github.com/SoapBox/linkifyjs paragraph</p> and another link to www.google.com
+Hello here are some links to ftp://awesome.com/?where=this and localhost:8080, pretty neat right? <p>Here's a nested github.com/SoapBox/linkifyjs paragraph</p> and another link to www.google.com and a <script>var obj = {}; obj.com = "hi"</script>

test/spec/linkify-html-test.js

@@ -21,7 +21,11 @@ describe('linkify-html', function () {
 				href += '?subject=Hello%20from%20Linkify';
 			}
 			return href;
-		}
+		},
+		ignoreTags: [
+			'script',
+			'style'
+		]
 	},
 
 	// For each element in this array
@@ -49,6 +53,10 @@ describe('linkify-html', function () {
 			'Unterminated anchor tag <a href="http://google.com"> This <em>is a link google.com</em> and this works!! https://reddit.com/r/photography/',
 			'Unterminated anchor tag <a href="http://google.com"> This <em>is a link google.com</em> and this works!! https://reddit.com/r/photography/',
 			'Unterminated anchor tag <a href="http://google.com"> This <em>is a link google.com</em> and this works!! https://reddit.com/r/photography/'
+		], [
+			'Ignore tags like <script>var a = {}; a.ca = "Hello";</script> and <style>b.com {color: blue;}</style>',
+			'Ignore tags like <script>var a = {}; <a href="http://a.ca" class="linkified" target="_blank">a.ca</a> = "Hello";</script> and <style><a href="http://b.com" class="linkified" target="_blank">b.com</a> {color: blue;}</style>',
+			'Ignore tags like <script>var a = {}; a.ca = "Hello";</script> and <style>b.com {color: blue;}</style>'
 		]
 	];