CODEWITHSUNDEEP
javascriptjqueryhtmlregexexpression
devjs11
devjs11

Reputation: 1958

jQuery + regular expression to replace href and src values inside textarea

I have various textareas:

<textarea><a href="/"><img src="/image1.gif" /></a></textarea>
<textarea><a href="/"><img src="/image2.gif" /></a></textarea>
<textarea><a href="/"><img src="/image2.gif" /></a></textarea>

And with jQuery I am trying to replace the href and src values (the src initial value must preserve) with regexp converting it into these:

<textarea><a href="http://www.sitename.com"><img src="http://www.sitename.com/image1.gif" /></a></textarea> // see how we preserve the original src value by just adding the sitename
<textarea><a href="http://www.sitename.com"><img src="http://www.sitename.com/image2.gif" /></a></textarea>
<textarea><a href="http://www.sitename.com"><img src="http://www.sitename.com/image2.gif" /></a></textarea>

I figured out that with the following regexp (?<=href=(\"|'))[^\"']+(?=(\"|')) and (?<=src=(\"|'))[^\"']+(?=(\"|')) I can locate the values but the rest have no idea...

Here is my code so far:

$(function(){
        (function(){
            $('textarea').each(function(){
                var obj = $(this);
                obj.text().replace(REGEXP,"http://www.sitename.com/);  //by placing the above regexp the script wont work

                //missing the src part

            });
        })();
    });

any help is appreciated

Upvotes: 2

Views: 1018

Answers (4)

Mulan
Mulan

Reputation: 135396

I like this solution

$('textarea').each(function(){

    // url helper function
    // this function will not prepend if the domain is already present
    var appendDomain = function(url) {
      return url.replace(
        /^(?:http:\/\/www\.sitename\.com)?/,
        'http://www.sitename.com'
      );
    };

    // create an html wrapper
    var html = $('<div></div>');

    // append current textarea contents
    html.append($(this).val());

    // find the A and IMG elems
    var a   = html.find('a'),
        img = a.find('img');

    // set the new href
    a.attr('href', function(idx, href){
        return appendDomain(href)
    });

    // set the new src
    img.attr('src', function(idx, src) {
        return appendDomain(src)
    });

    // set the new html
    $(this).val(html.html());

});

See it working on JSFIDDLE

Upvotes: 1

sinisake
sinisake

Reputation: 11338

And regex solution isn't too hard, too: :)

$(window).load(function() {


   $('textarea').each(function(){

    replaces= 'http://www.sitename.com';    

    text=$(this).text();

new_text=text.replace(/<a href=\"\/">/g,'<a href="'+replaces+'" >');

newest=new_text.replace(/<img src=\"/g,'<img src="'+replaces);

$(this).val(newest);

   })

});

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191789

You can convert the contents of the textarea to a jquery collection of DOM elements (assuming you can depend on the HTML being valid).

$('textarea').each(function(){
    var $obj = $("<div>" + $(this).val() + "</div>");
    $obj.find("a").attr("href", function (_, href) {
        return "http://www.sitename.com" + href;
    }).find("img").attr("Src", function (_, src) {
        return "http://www.sitename.com" + src;
    });
    $(this).val($obj.html());
});

http://jsfiddle.net/RPEzH/2/

Upvotes: 4

Max
Max

Reputation: 774

You don't need a regex to do that. You just have to concatenate the current url and the website url.

$('textarea').each(function(){
            var obj = $(this);
            obj.find('a').attr('href', 'http://www.sitename.com' + obj.find('a').attr('href'));
            obj.find('img').attr('src', 'http://www.sitename.com' + obj.find('img').attr('src'));
        });

Upvotes: 0

Related Questions