WIP escaping & chars in link text

Author: gregjacobs

package.json

@@ -40,12 +40,15 @@
         "pnpm": ">=10.10.0"
     },
     "keywords": [
-        "auto",
         "link",
+        "linkify",
         "autolink",
         "url",
-        "urls",
-        "anchor"
+        "anchor",
+        "email",
+        "hashtags",
+        "mentions",
+        "phone"
     ],
     "author": "Gregory Jacobs <[email protected]>",
     "license": "MIT",

src/match/url-match.ts

@@ -186,9 +186,21 @@ export class UrlMatch extends AbstractMatch {
         if (this.stripTrailingSlash) {
             anchorText = removeTrailingSlash(anchorText); // remove trailing slash, if there is one
         }
+
+        // For any '&' char in the URL, this can be interpreted by the browser
+        // as beginning a new HTML entity, which is not the intention. For
+        // example, the '&not' in 'http://google.com/search=hi&not=1' will be
+        // replaced with the '¬' char. Hence, we HTML-escape the '&' chars to
+        // '&' for display purposes
+        anchorText = anchorText.replace(/&/g, '&');
+
+        // And finally, decodePercentEncoding if requested. This must happen
+        // after the above '&'->'&' replacements or we'll end up double-encoding
+        // '&' chars generated from the removePercentEncoding() function itself
         if (this.decodePercentEncoding) {
             anchorText = removePercentEncoding(anchorText);
         }
+
         return anchorText;
     }
 }

tests/autolinker-url-other.spec.ts

@@ -165,7 +165,7 @@ describe('General URL Matching behavior (other) >', () => {
                     "Here's an example: http://example.com/foo.php?bar[]=1&bar[]=2&bar[]=3"
                 );
                 expect(result).to.equal(
-                    `Here's an example: <a href="http://example.com/foo.php?bar[]=1&bar[]=2&bar[]=3">example.com/foo.php?bar[]=1&bar[]=2&bar[]=3</a>`
+                    `Here's an example: <a href="http://example.com/foo.php?bar[]=1&bar[]=2&bar[]=3">example.com/foo.php?bar[]=1&amp;bar[]=2&amp;bar[]=3</a>`
                 );
             });
 
@@ -177,7 +177,7 @@ describe('General URL Matching behavior (other) >', () => {
                     "Here's an example: [http://example.com/foo.php?bar[]=1&bar[]=2&bar[]=3]"
                 );
                 expect(result).to.equal(
-                    `Here's an example: [<a href="http://example.com/foo.php?bar[]=1&bar[]=2&bar[]=3">example.com/foo.php?bar[]=1&bar[]=2&bar[]=3</a>]`
+                    `Here's an example: [<a href="http://example.com/foo.php?bar[]=1&bar[]=2&bar[]=3">example.com/foo.php?bar[]=1&amp;bar[]=2&amp;bar[]=3</a>]`
                 );
             });
         });
@@ -197,7 +197,7 @@ describe('General URL Matching behavior (other) >', () => {
                     "Here's an example: https://gohub.sharepoint.com/example/doc.aspx?sourcedoc={foobar}&action=edit"
                 );
                 expect(result).to.equal(
-                    `Here's an example: <a href="https://gohub.sharepoint.com/example/doc.aspx?sourcedoc={foobar}&action=edit">gohub.sharepoint.com/example/doc.aspx?sourcedoc={foobar}&action=edit</a>`
+                    `Here's an example: <a href="https://gohub.sharepoint.com/example/doc.aspx?sourcedoc={foobar}&action=edit">gohub.sharepoint.com/example/doc.aspx?sourcedoc={foobar}&amp;action=edit</a>`
                 );
             });
 
@@ -207,7 +207,7 @@ describe('General URL Matching behavior (other) >', () => {
                     "Here's an example: https://gohub.sharepoint.com/example/doc.aspx?sourcedoc={foobar}&action=edit"
                 );
                 expect(result).to.equal(
-                    `Here's an example: <a href="https://gohub.sharepoint.com/example/doc.aspx?sourcedoc={foobar}&action=edit">gohub.sharepoint.com/example/doc.aspx?sourcedoc={foobar}&action=edit</a>`
+                    `Here's an example: <a href="https://gohub.sharepoint.com/example/doc.aspx?sourcedoc={foobar}&action=edit">gohub.sharepoint.com/example/doc.aspx?sourcedoc={foobar}&amp;action=edit</a>`
                 );
             });
 
@@ -237,7 +237,7 @@ describe('General URL Matching behavior (other) >', () => {
                 'Check out the image at http://server.com/template?fmt=jpeg&$base=700.'
             );
             expect(result).to.equal(
-                'Check out the image at <a href="http://server.com/template?fmt=jpeg&$base=700">server.com/template?fmt=jpeg&$base=700</a>.'
+                'Check out the image at <a href="http://server.com/template?fmt=jpeg&$base=700">server.com/template?fmt=jpeg&amp;$base=700</a>.'
             );
         });
 
@@ -255,7 +255,7 @@ describe('General URL Matching behavior (other) >', () => {
                 'Twitter search for bob smith https://api.twitter.com/1.1/users/search.json?count=20&q=Bob+*+Smith'
             );
             expect(result).to.equal(
-                'Twitter search for bob smith <a href="https://api.twitter.com/1.1/users/search.json?count=20&q=Bob+*+Smith">api.twitter.com/1.1/users/search.json?count=20&q=Bob+*+Smith</a>'
+                'Twitter search for bob smith <a href="https://api.twitter.com/1.1/users/search.json?count=20&q=Bob+*+Smith">api.twitter.com/1.1/users/search.json?count=20&amp;q=Bob+*+Smith</a>'
             );
         });
 
@@ -264,7 +264,7 @@ describe('General URL Matching behavior (other) >', () => {
                 'Test caret url: https://sourcegraph.yelpcorp.com/search?q=repo:^services&patternType=literal'
             );
             expect(result).to.equal(
-                'Test caret url: <a href="https://sourcegraph.yelpcorp.com/search?q=repo:^services&patternType=literal">sourcegraph.yelpcorp.com/search?q=repo:^services&patternType=literal</a>'
+                'Test caret url: <a href="https://sourcegraph.yelpcorp.com/search?q=repo:^services&patternType=literal">sourcegraph.yelpcorp.com/search?q=repo:^services&amp;patternType=literal</a>'
             );
         });
 
@@ -284,12 +284,19 @@ describe('General URL Matching behavior (other) >', () => {
             );
         });
 
+        it('when & chars are included in the URL, they should be changed into &amp; entities for displaying the link so as to not be interpreted as starting a new HTML entity itself (https://github.com/gregjacobs/Autolinker.js/issues/392)', () => {
+            const result = autolinker.link('Check out https://tempuri.org?a=1&not=a');
+            expect(result).to.equal(
+                'Check out <a href="https://tempuri.org?a=1&not=a">tempuri.org?a=1&amp;not=a</a>'
+            );
+        });
+
         it('should include [ and ] in URLs with query strings', () => {
             const result = autolinker.link(
                 'Go to https://example.com/api/export/873/?a[]=10&a[]=9&a[]=8&a[]=7&a[]=6 today'
             );
             expect(result).to.equal(
-                'Go to <a href="https://example.com/api/export/873/?a[]=10&a[]=9&a[]=8&a[]=7&a[]=6">example.com/api/export/873/?a[]=10&a[]=9&a[]=8&a[]=7&a[]=6</a> today'
+                'Go to <a href="https://example.com/api/export/873/?a[]=10&a[]=9&a[]=8&a[]=7&a[]=6">example.com/api/export/873/?a[]=10&amp;a[]=9&amp;a[]=8&amp;a[]=7&amp;a[]=6</a> today'
             );
         });
 
@@ -425,7 +432,7 @@ describe('General URL Matching behavior (other) >', () => {
 				Hashes too <a href="http://yahoo.com:8000/#some-link">yahoo.com:8000/#some-link</a>.
 				Sometimes you need a lot of things in the URL like <a href="https://abc123def.org/path1/2path?param1=value1#hash123z">abc123def.org/path1/2path?param1=value1#hash123z</a>
 				Do you see the need for dashes in these things too <a href="https://abc-def.org/his-path/?the-param=the-value#the-hash">abc-def.org/his-path/?the-param=the-value#the-hash</a>?
-				There's a time for lots and lots of special characters like in <a href="https://abc123def.org/-+&@#/%=~_()|'$*[]?!:,.;/?param1=value-+&@#/%=~_()|'$*[]?!:,.;#hash-+&@#/%=~_()|'$*[]?!:,.;z">abc123def.org/-+&@#/%=~_()|'$*[]?!:,.;/?param1=value-+&@#/%=~_()|'$*[]?!:,.;#hash-+&@#/%=~_()|'$*[]?!:,.;z</a>
+				There's a time for lots and lots of special characters like in <a href="https://abc123def.org/-+&@#/%=~_()|'$*[]?!:,.;/?param1=value-+&@#/%=~_()|'$*[]?!:,.;#hash-+&@#/%=~_()|'$*[]?!:,.;z">abc123def.org/-+&amp;@#/%=~_()|'$*[]?!:,.;/?param1=value-+&amp;@#/%=~_()|'$*[]?!:,.;#hash-+&amp;@#/%=~_()|'$*[]?!:,.;z</a>
 				Don't forget about good times with unicode <a href="https://ru.wikipedia.org/wiki/Кириллица?Кириллица=1#Кириллица">ru.wikipedia.org/wiki/Кириллица?Кириллица=1#Кириллица</a>
 				and this unicode <a href="http://россия.рф">россия.рф</a>
 				along with punycode <a href="http://xn--d1acufc.xn--p1ai">xn--d1acufc.xn--p1ai</a>
@@ -441,7 +448,7 @@ describe('General URL Matching behavior (other) >', () => {
             );
 
             expect(result).to.equal(
-                '<a href="https://example.com/api/path?apikey={API_Key}&message=Test&[email protected]&department=someid123&subject=Some_Subject&[email protected]&is_html_message=Y">example.com/api/path?apikey={API_Key}&message=Test&[email protected]&department=someid123&subject=Some_Subject&[email protected]&is_html_message=Y</a>'
+                '<a href="https://example.com/api/path?apikey={API_Key}&message=Test&[email protected]&department=someid123&subject=Some_Subject&[email protected]&is_html_message=Y">example.com/api/path?apikey={API_Key}&amp;message=Test&amp;[email protected]&amp;department=someid123&amp;subject=Some_Subject&amp;[email protected]&amp;is_html_message=Y</a>'
             );
         });
     });

tests/autolinker-url-scheme.spec.ts

@@ -174,7 +174,7 @@ describe(`Matching scheme-prefixed URLs (i.e. URLs starting with 'http://' or 's
             'https://gitlab.example.com/search?utf8=✓&search=mysearch&group_id=&project_id=42&search_code=true&repository_ref=master'
         );
         expect(result).to.equal(
-            '<a href="https://gitlab.example.com/search?utf8=✓&search=mysearch&group_id=&project_id=42&search_code=true&repository_ref=master">gitlab.example.com/search?utf8=✓&search=mysearch&group_id=&project_id=42&search_code=true&repository_ref=master</a>'
+            '<a href="https://gitlab.example.com/search?utf8=✓&search=mysearch&group_id=&project_id=42&search_code=true&repository_ref=master">gitlab.example.com/search?utf8=✓&amp;search=mysearch&amp;group_id=&amp;project_id=42&amp;search_code=true&amp;repository_ref=master</a>'
         );
     });
 

tests/autolinker.spec.ts

@@ -677,25 +677,6 @@ describe('Autolinker', function () {
                 );
             });
 
-            it('should handle HTML entities like   within a non-autolinked part of a text node, properly appending it to the output', function () {
-                const html =
-                    'Joe went to yahoo.com and used HTML entities like > and < google.com';
-
-                const result = autolinker.link(html);
-                expect(result).to.equal(
-                    'Joe went to <a href="http://yahoo.com">yahoo.com</a> and used HTML&nbsp;entities like &gt; and &lt; <a href="http://google.com">google.com</a>'
-                );
-            });
-
-            it('should handle &amp; inside a url and not ignore it', function () {
-                const html = '<p>Joe went to example.com?arg=1&amp;arg=2&amp;arg=3</p>';
-
-                const result = autolinker.link(html);
-                expect(result).to.equal(
-                    '<p>Joe went to <a href="http://example.com?arg=1&arg=2&arg=3">example.com?arg=1&amp;arg=2&amp;arg=3</a></p>'
-                );
-            });
-
             it('should handle line breaks inside an HTML tag, not accidentally autolinking a URL within the tag', function () {
                 const html =
                     '<a href="http://close.io/" style="font-family: Helvetica,\nArial">http://close.io</a>';
@@ -750,6 +731,25 @@ describe('Autolinker', function () {
                 const result = autolinker.link('&amp;');
                 expect(result).to.equal('&amp;');
             });
+
+            it('should handle HTML entities like &nbsp; within a non-autolinked part of a text node, properly appending it to the output', function () {
+                const html =
+                    'Joe went to yahoo.com and used HTML&nbsp;entities like &gt; and &lt; google.com';
+
+                const result = autolinker.link(html);
+                expect(result).to.equal(
+                    'Joe went to <a href="http://yahoo.com">yahoo.com</a> and used HTML&nbsp;entities like &gt; and &lt; <a href="http://google.com">google.com</a>'
+                );
+            });
+
+            it('should handle &amp; inside a url and not ignore it', function () {
+                const html = '<p>Joe went to example.com?arg=1&amp;arg=2&amp;arg=3</p>';
+
+                const result = autolinker.link(html);
+                expect(result).to.equal(
+                    '<p>Joe went to <a href="http://example.com?arg=1&arg=2&arg=3">example.com?arg=1&amp;arg=2&amp;arg=3</a></p>'
+                );
+            });
         });
 
         describe('`newWindow` option', function () {
@@ -1800,15 +1800,15 @@ describe('Autolinker', function () {
             const testCases = {
                 schemeUrl: {
                     unlinked: 'http://google.com/path?param1=value1&param2=value2#hash',
-                    linked: '<a href="http://google.com/path?param1=value1&param2=value2#hash">http://google.com/path?param1=value1&param2=value2#hash</a>',
+                    linked: '<a href="http://google.com/path?param1=value1&param2=value2#hash">http://google.com/path?param1=value1&amp;param2=value2#hash</a>',
                 },
                 tldUrl: {
                     unlinked: 'google.com/path?param1=value1&param2=value2#hash',
-                    linked: '<a href="http://google.com/path?param1=value1&param2=value2#hash">google.com/path?param1=value1&param2=value2#hash</a>',
+                    linked: '<a href="http://google.com/path?param1=value1&param2=value2#hash">google.com/path?param1=value1&amp;param2=value2#hash</a>',
                 },
                 ipV4Url: {
                     unlinked: '192.168.0.1/path?param1=value1&param2=value2#hash',
-                    linked: '<a href="http://192.168.0.1/path?param1=value1&param2=value2#hash">192.168.0.1/path?param1=value1&param2=value2#hash</a>',
+                    linked: '<a href="http://192.168.0.1/path?param1=value1&param2=value2#hash">192.168.0.1/path?param1=value1&amp;param2=value2#hash</a>',
                 },
                 email: {
                     unlinked: '[email protected]',

tests/util/generate-url-combination-tests.ts

@@ -75,7 +75,7 @@ export function generateUrlCombinationTests({
                         input: `${origin}?param=1&param-2=2`,
                         description: 'long query string',
                         expectedHref: `${expectedOrigin}?param=1&param-2=2`,
-                        expectedAnchorText: `${hierPart}?param=1&param-2=2`,
+                        expectedAnchorText: `${hierPart}?param=1&param-2=2`,
                         autolinker,
                     },
                     {
@@ -89,7 +89,7 @@ export function generateUrlCombinationTests({
                         input: `${origin}#param1=a&param2=b`,
                         description: 'hash params',
                         expectedHref: `${expectedOrigin}#param1=a&param2=b`,
-                        expectedAnchorText: `${hierPart}#param1=a&param2=b`,
+                        expectedAnchorText: `${hierPart}#param1=a&param2=b`,
                         autolinker,
                     },
                     {
@@ -110,7 +110,7 @@ export function generateUrlCombinationTests({
                         input: `${origin}/-+&@#/%=~_()|'$*[]?!:,.;/?param1=value-+&@#/%=~_()|'$*[]?!:,.;#hash-+&@#/%=~_()|'$*[]?!:,.;z`,
                         description: 'all special chars in the URL',
                         expectedHref: `${expectedOrigin}/-+&@#/%=~_()|'$*[]?!:,.;/?param1=value-+&@#/%=~_()|'$*[]?!:,.;#hash-+&@#/%=~_()|'$*[]?!:,.;z`,
-                        expectedAnchorText: `${hierPart}/-+&@#/%=~_()|'$*[]?!:,.;/?param1=value-+&@#/%=~_()|'$*[]?!:,.;#hash-+&@#/%=~_()|'$*[]?!:,.;z`,
+                        expectedAnchorText: `${hierPart}/-+&@#/%=~_()|'$*[]?!:,.;/?param1=value-+&@#/%=~_()|'$*[]?!:,.;#hash-+&@#/%=~_()|'$*[]?!:,.;z`,
                         autolinker,
                     },
                     {