jQuery Create Slug from Text: Change a text string to make slug to use in URL

Recommend this page to a friend!
     
  Info   Example   Demos   View files Files   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 73 All time: 469 This week: 2Up
Version License JavaScript version Categories
text-to-slug 1.12MIT/X Consortium ...4jQuery, Text processing, Forms
Description 

Author

afshin akhgar

This is jQuery plugin can change a text string to make slug to use in URL.

It listens to key up events on a form text inputs and replaces the spaces with dashes and removes characters with accents.

The slug text is inserted in a hidden input with a given name.

Innovation Award
JavaScript Programming Innovation award nominee
October 2016
Number 2

Prize: One downloadable e-book of choice by O'Reilly		 Slug is the part of a URL that is often used to include in the pages' URLs the respective titles to make it easy for users to learn what the pages are about looking just at their URLs.

Not all characters can be included in URLs. For instance spaces and other characters need to be encoded in a special way, so they are not easily readable by the users.

This object can take a text of a title and create the slug by replacing characters that would need to be encoded, by using dashes.

Manuel Lemos
Picture of afshin akhgar
  Performance   Level  
Name: afshin akhgar <contact>
Classes: 2 packages by
Country: Iran Iran
Age: 39
All time rank: 1623 in Iran Iran
Week rank: 6 Up1 in Iran Iran Up

Level 1 Star

 Innovation award
Innovation award
Nominee: 1x

Example

<html>
	<head>
		<title>Text to Slug (text2slug)</title>
		<meta name="description" content="text-to-slug,jquery plugin for making slugable input in a form">
		<meta name="keywords" content="text-to-slug,text 2 slug,slug,slugable,sluggable,slugger,sluggify,slugify,search,url,url friendly">
		<meta name="author" content="Afshin AKhgar	">
		<script src="../src/jquery.min.js"></script>
		<script src="../src/text2slug.min.js"></script>


		<!-- Web Fonts Google -->
		<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
		<link href='https://fonts.googleapis.com/css?family=Rokkitt' rel='stylesheet' type='text/css'>
		<link rel="stylesheet" href="../src/styles.css">
		<script>
    /*Easy Start!*/
			$(function(){
				$('#slug_tmp').text2slug();	
			});
      /*Change Input Name*/
			$(function(){
	        	$('#slug_tmp2').text2slug({input_name:'slug2'});
      });

      /*Change Color*/
      $(function(){
          $('#slug_tmp3').text2slug({slug_color:'#DD094C'});
      });

      /*change Separator*/
      $(function(){
          $('#slug_tmp4').text2slug({separator:'#'});
        });
		</script>
		<style>
	.ribbon {
  background-color: #a00;
  overflow: hidden;
  white-space: nowrap;
  /* top left corner */
  position: absolute;
  left: -50px;
  top: 40px;
  /* 45 deg ccw rotation */
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
  /* shadow */
  -webkit-box-shadow: 0 0 10px #888;
     -moz-box-shadow: 0 0 10px #888;
          box-shadow: 0 0 10px #888;
}
.ribbon a {
  border: 1px solid #faa;
  color: #fff;
  display: block;
  font: bold 81.25% 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 1px 0;
  padding: 10px 50px;
  text-align: center;
  text-decoration: none;
  /* shadow */
  text-shadow: 0 0 5px #444;
}

div.hint{
      font-size: 21px;
    font-family: Rokkitt;
}
</style>
		
	</head>
	
	<body>

		<div class="ribbon">
		  	<a href="https://github.com/afshinpersian/text-to-slug">Fork me on GitHub</a>
		</div>


		<div class="wrapper">
			<header class="manaSlug__header">
				<h1 class="manaSlug__header-title">Text to Slug</h1>
			</header>

			<div class="desc">
				<b>Text to Slug</b>  is a neat and small jquery plugin for making slugable input in a form
			</div>
			<br>
			<br>
			<div class="desc">
				<h2>Get Start</h2>
			<br>

                <div>
                    Requires : JQuery
			<br>


                </div>
                <div>
                    Add jquery and Text to slug js to document
                </div>


    <pre class="demo">
    <code>
        &lt;script src="src/jquery.min.js"&gt;&lt;/script&gt;
        <br/>
        &lt;script src="src/text2slug.js"&gt;&lt;/script&gt;
    </code>
    </pre>

			</div>



			<div class="demo">
				<h3>Demo #1 - Easy Start!</h3>
				<form action="send.php">
           &lt;input type="text" name="slug_tmp" id="slug_tmp"&gt;
					<input type="text" name="slug_tmp" id="slug_tmp">
				</form>
<pre>
    <code>
        $(function(){
            $('#slug_tmp').text2slug();
        });
    </code>
</pre>

			</div>

            <!--Demo 2-->
            <div class="demo">
                <h3>Demo #2 - Change hidden input name</h3>
                <form action="send.php">
                 &lt;input type="text" name="slug_tmp2" id="slug_tmp2"&gt;
                    <input type="text" name="slug_tmp2" id="slug_tmp2">
                </form>
<pre>
    <code>
        $(function(){
        	$('#slug_tmp2').text2slug({input_name:'slug2'});
        });
    </code>
</pre>

            </div>
            <!--End Demo-->



<!--Demo 2-->
            <div class="demo">
                <h3>Demo #3 - Change Input Color</h3>
                <form action="send.php">
                     &lt;input type="text" name="slug_tmp3" id="slug_tmp3"&gt;
                    <input type="text" name="slug_tmp3" id="slug_tmp3">
                </form>
<pre>
    <code>
        $(function(){
          $('#slug_tmp3').text2slug({slug_color:'#DD094C'});
        });
    </code>
</pre>

            </div>
            <!--End Demo-->



            <!--Demo 2-->
            <div class="demo">
                <h3>Demo #3 - Change Separator</h3>
                <div class="hint">text to Slug Plugin uses hyphen (dash) as separator in output . You can Change It Now !</div>
                <div class="hint">For Example separate charachters with "#" instead of "-" </div>
                <form action="send.php">
                     &lt;input type="text" name="slug_tmp4" id="slug_tmp4"&gt;
                    <input type="text" name="slug_tmp4" id="slug_tmp4">
                </form>
<pre>
    <code>
        $(function(){
          $('#slug_tmp4').text2slug({separator:'#'});
        });
    </code>
</pre>

            </div>
            <!--End Demo-->



		</div>
	</body>
</html>

Details

Text2Slug

Text2Slug is a neat and small jquery plugin for making slugable input in a form > Text2Slug Plugin is less than ~1kb * Text2Slug generate slug from unicode string, URL-friendly slugify with multiple languages support.

Install

> Requires : JQuery * First download package text-to-slug.js or text-to-slug.min.js * Then put Jquery and text-to-slug.js file into your html Head * use plug in * Also You can see examples in examples folder > Add jquery and text-to-slug slug js to document >

> >

live Demo

> Live Demo

<script src="src/jquery.min.js"></script>
<script src="src/text-to-slug.js"></script>

<input type="text" id="slug_tmp2" name="slug_tmp2" >

<script>
$(function(){
        $('#slug_tmp2').text2slug({input_name:'slug2'});
});
</script>

Requests or bugs?

Author

Afshin Akhgar , afshin@akhgar.net > akhgar.net

License

The source files are distributed under the The MIT License (MIT).

About

Slug is the part of a URL that is often used to include in the pages' URLs the respective titles to make it easy for users to learn what the pages are about looking just at their URLs.

Not all characters can be included in URLs. For instance spaces and other characters need to be encoded in a special way, so they are not easily readable by the users.

This object can take a text of a title and create the slug by replacing characters that would need to be encoded, by using dashes.

Manuel Lemos


  text2slugExternal page  

Open in a separate window

  Files folder image Files (7)  
File Role Description
Files folder imageexamples (1 file)
Files folder imagesrc (4 files)
Accessible without login Plain text file LICENSE Lic. License text
Accessible without login Plain text file README.md Doc. Documentation

  Files folder image Files (7)  /  examples  
File Role Description
  Accessible without login Plain text file index.html Example Example

  Files folder image Files (7)  /  src  
File Role Description
  Plain text file jquery.min.js Class Class source
  Accessible without login Plain text file styles.css Data Auxiliary data
  Plain text file text2slug.js Class Class source
  Plain text file text2slug.min.js Class Class source

Downloadtext-to-slug-2021-11-28.zip 41KB
Downloadtext-to-slug-2021-11-28.tar.gz 40KB
 Version Control Unique User Downloads Download Rankings  
 100%
Total:73
This week:0
All time:469
This week:2Up

  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.