jQuery to identify URL and append parameters

Question

This jQuery code will run as a bookmarklet in the wordpress editor. The bookmarklet / jQuery code will edit the text in the content field and append a parameter (ex. ?parameter) to the end of the URL.

The URL is always the same domain name (ex. domain.com). However the URL will often contain directories (ex. domain.com/directory/index.html?parameter). I need the jQuery code to append regardless of what is after the domain name.

The most complex situation would be domain.com/directory/index.html?someotherparameter?parameter. This content area will often contain more than one url so the script will need to loop through the entire text.

My semi-working code

var url= 'domain.com';
var append = ' ?parameter ';

$(".wp-editor-area").each(
    function(){
        var haystack = $(this).text();
        $(this).text(haystack.replace(url, url+ append));
    });

The HTML code that it is modifying

<div id="wp-content-editor-container" class="wp-editor-container"><textarea class="wp-editor-area" rows="10" tabindex="1" cols="40" name="content" id="content">&lt;a title="This is a hyperlink" href="http://domain.com/directory"&gt;This is a hyperlink&lt;/a&gt;</textarea></div>

its current output

<a title="This is a hyperlink" href="http://domain.com ?parameter /directory">This is a hyperlink</a>

Jsfiddle for convenience

Notice my output does not append after the entire URL. How can I modify this for more complex URLs and loop through a document if it had more URls in the body of text?

The only relevant and similar question I could find is this, however I could not duplicate the results.

Thanks!!

score 2 · Accepted Answer · edited May 23 '17 at 12:31

2

First, the Fiddle.

Your example code was doing exactly what you asked it to. It replaced the 'domain.com' portion of the the string with the domain and your parameters. Once it found 'domain.com' it stopped looking to see if there was anything else attached to it.

Instead of a straight text replace, try using a regular expression to find URLs within a string.

Source:

<div id="wp-content-editor-container" class="wp-editor-container">
    <textarea class="wp-editor-area" rows="10" tabindex="1" cols="40" name="content" id="content">
        &lt;a title="This is a hyperlink" href="http://domain.com/directory"&gt;This is a hyperlink&lt;/a&gt;
        &lt;a title="This is another hyperlink" href="http://google.com/directory"&gt;This is another hyperlink&lt;/a&gt;        
    </textarea>
</div>

Javascript:

var url = 'domain.com';
var append = '?parameter ';

$(".wp-editor-area").each(function() {
    $(this).text(urlify($(this).text()));
});

function urlify(text) {
    var urlRegex = /(\b(https?|ftp|file):\/\/[domain.com][-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
    return text.replace(urlRegex, function(url) {
        return url + append;
    })
}

edited May 23 '17 at 12:31

Community

1
1

answered Jul 10 '12 at 22:31

Jason Towne

8,014
5
54
69

Thanks! This is almost perfect...however, i need the script to only apply to a specific domain. How would i make the script only work for domain.com and not google.com? – DirkDiggler Jul 10 '12 at 23:39
@user1512806 I've updated the regular expression in my answer to only look for URLs from a specific domain as you requested. If my answer helped solve your problem, giving it an upvote and marking it as the accepted answer will help others who are having the same problem find a solution that much faster. – Jason Towne Jul 11 '12 at 14:38
It works! Thank you so much! I would love to upvote your answer but i do not have enough reputation. However, i marked it as correct. Thanks again! – DirkDiggler Jul 11 '12 at 14:58
@user1512806 My pleasure. Although it looks like you have enough reputation to upvote. Have you tried? – Jason Towne Jul 11 '12 at 15:01
ah its working now! Must have taken a second to validate my new rep. Thanks! – DirkDiggler Jul 11 '12 at 15:13

jQuery to identify URL and append parameters

1 Answers1

Linked