JavaScript Get Friendly URL: Create user friendly URLs entered in a text input

Recommend this page to a friend!
     
  Info   Example   Screenshots   View files Files   Download Download   Reputation   Support forum   Blog    
Last Updated Ratings Unique User Downloads Download Rankings
2025-07-09 (-1 hours ago) RSS 2.0 feedNot yet rated by the usersTotal: 66 All time: 478 This week: 4Up
Version License JavaScript version Categories
url-friendly-box 1.0MIT/X Consortium ...5jQuery, Text processing, Forms
Description 

Author

Agustin Rios Reyes

This jQuery plugin can create user friendly URLs entered in a text input.

It takes the value of a text input and generate a URL friendly version of that text.

The plugin can replace spaces by dashes, limit the length of the text, convert letters with accents to plain ASCII letters, and prepend the domain URL.

Picture of Agustin Rios Reyes
  Performance   Level  
Name: Agustin Rios Reyes <contact>
Classes: 4 packages by
Country: Mexico Mexico
Age: 39
All time rank: 792 in Mexico Mexico
Week rank: 6 Up1 in Mexico Mexico Up

Level 2 StarStar

 Innovation award
Innovation award
Nominee: 1x

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>friendly url</title>
	<style type="text/css" media="screen">	
		.urlfriendlybox {
		    background-color: #ccc;
		    padding: 10px;
		    width: 500px;
		}
		.Fila {
		    display: inline-block;
		    margin-bottom: 5px;
		    margin-top: 5px;
		    width: 100%;
		}
		.Fila > input {
		    width: 98%;
		}
		.icheckbox {
		    margin-left: 15px;
		    vertical-align: middle !important;
		    width: auto !important;
		}
	</style>
</head>
<body>
<div id="resultd"></div>
<input type="text" id="url1" value="" placeholder="Text to URL">
<br>
<input type="text" id="url2" value="" placeholder="Text to URL">
<br>
<input type="text" id="url3" value="" placeholder="Text to URL">
<br>
<input type="text" id="url4" value="" placeholder="Text to URL">
<br>
<input type="text" id="url5" value="" placeholder="Text to URL">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="UrlFriendlyBox.js" type="text/javascript"></script>
<script type="text/javascript">
$("#url1").UrlFriendlyBox();
$("#url2").UrlFriendlyBox({lboStopWords:true});
$("#url3").UrlFriendlyBox({lboSelectStopWords:true});
$("#url4").UrlFriendlyBox({lboSelectStopWords:true,lboDomain:true});
$("#url5").UrlFriendlyBox({lboSelectStopWords:true,lboAppend:true,lstAppend:"/888"});
</script>
</body>
</html>

Screenshots (1)  
  • example
  Files folder image Files (4)  
File Role Description
Plain text file Example.html Example Example
Image file example.png Data Auxiliary data
Plain text file UrlFriendlyBox.js Class Class source

Downloadurl-friendly-box-2025-07-09.zip
Downloadurl-friendly-box-2025-07-09.tar.gz
 Version Control Unique User Downloads Download Rankings  
 75%
Total:66
This week:0
All time:478
This week:4Up

  Applications that use this package  
No pages of applications that use this class were specified.

Add link image If you know an application of this package, send a message to the author to add a link here.