the Forum

Converting Strings to URL-friendly strings using jQuery

Posted on February 13, 2012 by Michael Rosario
Total Posts: 33 | Join date: 03-12-11

I needed a form field that converts a string to a URL-friendly field. So first I created two input fields:

<input class="TxtInput" type="text" name="screen_name" value="" id="screen_name" class="TxtInput" /> 
<input class="TxtInput" type="hidden" name="user_url" readonly='readonly' value="{user_url}" id="user_url" class="TxtInput" /> 

Then I used jQuery to automatically store the cleaned aka "sanitized" value of user_url automatically. Here is my code:

/* This is for loading */
var temp = $("#screen_name").val().toLowerCase().replace(/ +/g,'_').replace(/[0-9]/g,'').replace(/[^a-z0-9-_]/g,'').trim();
$('#user_url').val(temp);

/* This is when the user updates the input field */
$("#screen_name").change(
function(){
var temp = $(this).val().toLowerCase().replace(/ +/g,'_').replace(/[0-9]/g,'').replace(/[^a-z0-9-_]/g,'').trim();
$('#user_url').val(temp);
}); 

So for example, I put John Jameson Smith on screen_name field. On the user_url field, it gets john_jameson_smith.

Tags: There are no tags for this entry.

6 answers, add yours below

Posted on on June 21, 2012 at 2:43am
by Miro

Hello Michael,
I am a beginner in jQuery - how can I apply this script to two input fields? I mean, I have two input fields (first name and second name) and a field "#url" where I want to this URL: "firstname-secondname".
Can you help me, please?

Posted on on June 21, 2012 at 8:49am
by Michael Rosario

Hi Miro,

Basically, you should have three fields:

<input id="fname" name="fname">
<input id="lname" name="lname">
<input id="user_url" name="user_url"> 

For jQuery, we we can simply use the $.change() function to detect user input, for simplicity, I'll get you started, but I would recommend adding some additional validation and simplifying the code.

$("#fname,#lname").change( function(){
// $.change() detects user input

var lname = ""; // create your variables
var fname = ""; 

if($("#fname").val()!=""){
fname = $("#fname").val().toLowerCase().replace(/ +/g,'_').replace(/[0-9]/g,'').replace(/[^a-z0-9-_]/g,'').trim();
}
//if the fname field is not empty

if($("#lname").val()!=""){
lname = $("#fname").val().toLowerCase().replace(/ +/g,'_').replace(/[0-9]/g,'').replace(/[^a-z0-9-_]/g,'').trim();
} 
//if the lname field is not empty

$('#user_url').val(fname+"-"+lname); 
}); 

Posted on on June 21, 2012 at 1:15pm
by Miro

It works great! Thank you very much, Michael!

Posted on on June 21, 2012 at 1:57pm
by Michael Rosario

you are welcome! happy coding!

Posted on on November 27, 2012 at 12:06pm
by dawgbone

Correct me if I'm wrong, but you have a conflict here:


.replace(/[0-9]/g,'')

Replaces all numbers with nothing


replace(/[^a-z0-9-_]/g,'')

Which allows numbers.

If you want to allow numbers, the first part isn't needed. If you don't want numbers, you don't need to include 0-9 in the latter one.

Posted on on March 13, 2013 at 10:01pm
by Michael Rosario

Yeah I don't think people's names have numbers.

add your answers here

comments powered by Disqus

Amazon.com Widgets

the Forum

Converting Strings to URL-friendly strings using jQuery

6 answers, add yours below

add your answers here

Trending Threads

Tags