Don't encode fragment as part of linkValidation

Fix for: #1237

Previously URIs were split at a question mark to determine path and
query components. This caused a problem when fragments were part of a
link as they were deemed to be part of the query.

This splits a URL at a ? and a # to get both components and does not
encode the fragment. It did feel a little wrong not to encode the
fragment at all as there some characters that should be encoded, however
the encodeUriComponent method is too heavy handed for a fragment.

spec/anchor.spec.js

@@ -382,6 +382,32 @@ describe('Anchor Button TestCase', function () {
             expect(link.href).toBe(expectedOpts.value);
         });
 
+        it('should not change # to %23 for a valid url if linkValidation option is set to true', function () {
+            var editor = this.newMediumEditor('.editor', {
+                    anchor: {
+                        linkValidation: true
+                    }
+                }),
+                link,
+                anchorExtension = editor.getExtensionByName('anchor'),
+                expectedOpts = {
+                    value: 'http://example.com/?query=value#anchor',
+                    target: '_self'
+                };
+
+            spyOn(editor, 'execAction').and.callThrough();
+
+            selectElementContentsAndFire(editor.elements[0]);
+            anchorExtension.showForm(expectedOpts.value);
+            fireEvent(anchorExtension.getForm().querySelector('a.medium-editor-toolbar-save'), 'click');
+
+            expect(editor.execAction).toHaveBeenCalledWith('createLink', expectedOpts);
+
+            link = editor.elements[0].querySelector('a');
+            expect(link).not.toBeNull();
+            expect(link.href).toBe(expectedOpts.value);
+        });
+
         it('should not encode an encoded URL if linkValidation option is set to true', function () {
             var editor = this.newMediumEditor('.editor', {
                     anchor: {

src/js/extensions/anchor.js

@@ -259,9 +259,10 @@
             var urlSchemeRegex = /^([a-z]+:)?\/\/|^(mailto|tel|maps):|^\#/i,
                 // telRegex is a regex for checking if the string is a telephone number
                 telRegex = /^\+?\s?\(?(?:\d\s?\-?\)?){3,20}$/,
-                split = value.split('?'),
-                path = split[0],
-                query = split[1];
+                urlParts = value.match(/^(.*?)(?:\?(.*?))?(?:#(.*))?$/),
+                path = urlParts[1],
+                query = urlParts[2],
+                fragment = urlParts[3];
 
             if (telRegex.test(value)) {
                 return 'tel:' + value;
@@ -271,7 +272,10 @@
                     // Ensure path is encoded
                     this.ensureEncodedUri(path) +
                     // Ensure query is encoded
-                    (query === undefined ? '' : '?' + this.ensureEncodedQuery(query));
+                    (query === undefined ? '' : '?' + this.ensureEncodedQuery(query)) +
+                    // Include fragment unencoded as encodeUriComponent is too
+                    // heavy handed for the many characters allowed in a fragment
+                    (fragment === undefined ? '' : '#' + fragment);
             }
         },