J.2
J.2

Reputation: 156

jQuery multiple character replace

I have a very easy question. Unfortunately, I can't find the answer.

I just made 2 simple input functions

Input 1:<br /><input type="text" id="i1" name="i1" />
Input 2:<br />
<input type="text" id="i2" name="i2" />

When changing input 1, I want to let appear the result in input 2. Also I want some characters being replaced and I want to make the characters lower case (in order to use it as an url).

So I made the following jQuery code:

$("#i1").keyup(function() {
var ptitle = $("#i1").val();
$("#2").val(ptitle.replace(" ", "-").toLowerCase());
});

This works good, except when I type a string that has multiple times the same character to replace. Then it only replaces the first time.

For example: When I type in input 1: 'About this company' it will result in input 2: 'about-this company'. It should be: 'about-this-company'. Does anyone knows what is going wrong in my jQuery code?

Upvotes: 5

Views: 13287

Answers (3)

Ties
Ties

Reputation: 5846

this works for me

$(function(){
  $("#i1").keyup(function() {
    var ptitle = $("#i1").val();
    $("#i2").val( ptitle.replace(/ /g,"-").toLowerCase() );
  });
});

Upvotes: 0

Marc
Marc

Reputation: 9354

This is because replace requires a global flag to replace multiple instances.

Try this

$("#i1").keyup(function() { var ptitle = $("#i1").val(); 
       $("#2").val(ptitle.replace(/ /g, "-").toLowerCase()); 
});

Here's a pretty close question to yours with a good answer:
Replacing spaces with underscores in JavaScript?

Upvotes: 2

jerone
jerone

Reputation: 16871

Something like this:

$("#i1").keyup(function() { 
    var ptitle = $(this).val(); 
    $("#i2").val(ptitle.replace(/\s/g, "-").toLowerCase()); 
});

Upvotes: 9

Related Questions