javascript - 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!!

Answer 1

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