How can I change some text to lowercase and replace spaces with hyphens using jQuery?

Question

I have a hidden input field that will take the value of another on keyup and I'm trying to figure out how transform the value in the hidden field to lowercase and replace spaces with hyphens.

So, if someone types "This Is A Sample" in the title input field, the identifier input field will be set to "this-is-a-sample".

<input type="text" name="title" value="This Is A Sample" />
<input type="hidden" name="identifier" value="this-is-a-sample />

Solution 1

This will replace all spaces with -

<script type="text/javascript">
$(document).ready(function(){
var test= $('input[name="title"]').val();
test = test.toLowerCase().replace(/ /g, '-');
$('input[name="identifier"]').val(test);
}):
</script>

Solution 2

To convert to lowercase :

var lowercase = 'This Is A Sample'.toLowerCase();

To Replace empty space:

var Replace= 'This Is A Sample'.replace(/ /g,"-");

take a look at this example

@JSbin

Solution 3

You can do it like this:

<script type="text/javascript">
var el = document.getElementById('identifier');
var text = el.value;
el.value = text.toLowerCase().replace(' ', '-');
</script>

or if you are using JQuery:

<script type="text/javascript">
$('identifier').value = $('identifier').value.toLowerCase().replace(' ', '-');
</script>

Solution 4

var lower = $('input#textFieldId').val().toLowerCase(); // to lower case
var hyp = lower.replace(/ /g,"-");                      // spaces to hyphens
$('input#hiddenFieldId').val(hyp);                      // in hidden field

Check

Solution 5

To switch your text to lowercase, use the JavaScript toLowerCase() method.

<script type="text/javascript">

var str="Hello World!";
document.write(str.toLowerCase());

</script> 

See this Stackoverflow question on how to replace all the spaces with dashes using JavaScript.

View more solutions