jquery - adding `http://` to string if not present

Question

In my laravel app I process an external URL provided by user. Sometimes user would paste it without the http:// prefix. UI have used this question's answers: How to check URL contains http using JQuery and RegEx

I tried to use these instructions

var lnk = $('#confirmation_URL').val();
var lnk2 = $('#confirmation_URL').val();

//adding http if not present
// if (lnk && !lnk.match(/^.+:\/\/.*/)) {  // produces jQuery error
if (lnk && !lnk.match(/^http([s]?):\/\/.*/)) { // produces jQuery error

   var lnk = $('http://' + lnk2);
   console.log( "prefix http added successfully" );
}

When pasting an URL, I get this error:

jquery-2.1.4.min.js:2 Uncaught Error: Syntax error, unrecognized expression: http://laravel.com/docs/5.1/migrationsga.error @ jquery-2.1.4.min.js:2ga.tokenize @ jquery-2.1.4.min.js:2ga.select @ jquery-2.1.4.min.js:2ga @ jquery-2.1.4.min.js:2n.fn.extend.find @ jquery-2.1.4.min.js:2n.fn.init @ jquery-2.1.4.min.js:2n @ jquery-2.1.4.min.js:2(anonymous function) @ dodaj:1460n.event.dispatch @ jquery-2.1.4.min.js:3r.handle @ jquery-2.1.4.min.js:3

what i tried

The error pops out in console for both jQUery 2.14 and 3.0beta1 Just to test for silly mistakes and exclude potential causes (such as jQUery affecting the original variable) , I created two variables with identical content: lnk and lnk2.

Thank you for your suggestions.

Anbarasi · Accepted Answer · 2016-04-18 05:54:59Z

3

Please try this

$('#confirmation_URL').keyup(function () {
        if (  ($(this).val().length >=5) && ($(this).val().substr(0, 5) != 'http:') && ($(this).val().substr(0, 5) != 'https') ) {
            $(this).val('http://' + $(this).val());
        }
    });

answered Apr 18, 2016 at 5:54

Anbarasi

4212 gold badges6 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Peter Over a year ago

I simplified it: ` if ( ($(this).val().length >=5) && ($(this).val().substr(0, 4) != 'http') ) { $(this).val('http://' + $(this).val()); console.log('prefixed successfully'); } else { console.log('already prefixed'); }` But now upon pasting a link without http the IF condition always execudes the part which SHOULD be executed when link has a http

Peter Over a year ago

I just tried to reverse the IF condition, but I got http://http:// as an output. Funny, but despiriting. Any guesses?

Peter Over a year ago

OK. This code finally worked: ` var lnk2 = $('#confirmation_URL').val(); if ( ($(this).val().length >=5) && ($(this).val().substr(0, 4) == 'http') ) { console.log('already prefixed'); } else { $(this).val('http://' + lnk2); console.log('prefixed successfully'); } var lnk = $(this).val();` Thank you all!

Aminah Nuraini · Accepted Answer · 2016-04-18 05:38:48Z

1

Try create RegExp object first

regex = new RegExp('^http([s]?):\/\/.*')
if (lnk && !regex.test(lnk)) { 

   lnk.val('http://' + lnk2);
   console.log( "prefix http added successfully" );
}

answered Apr 18, 2016 at 5:38

Aminah Nuraini

19.4k9 gold badges98 silver badges113 bronze badges

4 Comments

Peter Over a year ago

your solution seems to be a php code. Are you sure I can youe your snippet to define a RexExp in jQuery? Anyway, I still get Uncaught TypeError: lnk.val is not a function

Aminah Nuraini Over a year ago

I googled and it was for jQuery. Reading your error, it means the error is not on the regex

Peter Over a year ago

My understanding is that the pair 'http://' + lnk2 should be both a text string, but somehow they don't. Still no idea how to fix it. Check out the @Anbarasi solution - within it now the problem is that the IF condition is reversed.

Peter Over a year ago

Ok, problem solved by Anbarasi's workaround. Thank you for your attempt!

Gerald · Accepted Answer · 2016-04-18 06:14:11Z

1

var lnk = $('#confirmation_URL').val();
var lnk2 = $('#confirmation_URL').val();

//adding http if not present
// if (lnk && !lnk.match(/^.+:\/\/.*/)) {  // produces jQuery error
if (lnk && !lnk.match(/^http([s]?):\/\/.*/)) { // produces jQuery error
   // Here produces error actually
   // lnk = $('http://' + lnk2);

   lnk = 'http://' + lnk2;
   $('#confirmation_URL').val(lnk);
   console.log( "prefix http added successfully" );
}

Updated, sorry for the mistake.

edited Apr 18, 2016 at 6:14

answered Apr 18, 2016 at 5:30

Gerald

9861 gold badge8 silver badges17 bronze badges

4 Comments

Peter Over a year ago

this solution produces Uncaught TypeError: lnk.val is not a function. I have also tied $(lnk).val('http://' + lnk2); and other variants, but to no success.

Peter Over a year ago

Ok, problem solved by Anbarasi's workaround. Thank you for your attempt!

Gerald Over a year ago

It seems that you are mixing jQuery objects and strings, $('#confirmation_URL') is a jQuery object, while 'http://' + ... is a string, $('http://' + ...) just doesn't make sense.

Peter Over a year ago

This is what I wrote under Aminah Nuraini's solution. I know it doesn't make sense. How transform the jQuery object into a string?

Collectives™ on Stack Overflow

jquery - adding `http://` to string if not present

what i tried

3 Answers 3

3 Comments

4 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

what i tried

3 Answers 3

3 Comments

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related