Replacing spaces with underscores in JavaScript?

Question

I'm trying to use this code to replace spaces with _, it works for the first space in the string but all the other instances of spaces remain unchanged. Anybody know why?

function updateKey()
{
    var key=$("#title").val();
    key=key.replace(" ","_");
    $("#url_key").val(key);
}

Answer 1

Try .replace(/ /g,"_");

Edit: or .split(' ').join('_') if you have an aversion to REs

Edit: John Resig said:

If you're searching and replacing through a string with a static search and a static replace it's faster to perform the action with .split("match").join("replace") - which seems counter-intuitive but it manages to work that way in most modern browsers. (There are changes going in place to grossly improve the performance of .replace(/match/g, "replace") in the next version of Firefox - so the previous statement won't be the case for long.)

Answer 2

try this:

key=key.replace(/ /g,"_");

that'll do a global find/replace

javascript replace

Answer 3

To answer Prasanna's question below:

How do you replace multiple spaces by single space in Javascript ?

You would use the same function replace with a different regular expression. The expression for whitespace is \s and the expression for "1 or more times" is + the plus sign, so you'd just replace Adam's answer with the following:

key=key.replace(/\s+/g,"_");

Answer 4

You can try this

 var str = 'hello     world  !!';
 str = str.replace(/\s+/g, '-');

It will even replace multiple spaces with single '-'.

Answer 5

I created JS performance test for it http://jsperf.com/split-and-join-vs-replace2

Answer 6

Replace spaces with underscore

var str = 'How are you';
var replaced = str.split(' ').join('_');

Output: How_are_you

Answer 7

Just using replace:

var text = 'Hello World';
    
new_text = text.replace(' ', '_');
    
console.log(new_text);

Answer 8

I know this is old but I didn't see anyone mention extending the String prototype.

String.prototype.replaceAll = function(search, replace){
    if(!search || !replace){return this;} //if search entry or replace entry empty return the string
    return this.replace(new RegExp('[' + search + ']', 'g'), replace); //global RegEx search for all instances ("g") of your search entry and replace them all.
};

Answer 9

const updateKey = key => console.log(key.split(' ').join('_'));
updateKey('Hello World');

Answer 10

Replace all occurrences

What you are trying to do is to replace all the spaces in the title with _. But when you use the replace method with string match (first argument " " in your case) then it finds and replaces only the first match. Check the replace method. To replace all match you can use the following 3 methods:

1. use regex with the global flag in replace method - When you use the replace method with regex with /g flag it replaces all the matching occurrences in a string.

function updateKey()
{
    var key=$("#title").val();
    key=key.replace(/ /g,"_");
    $("#url_key").val(key);
}
// Show case
let title = "Your document title";
console.log(title.replace(/ /g,"_"));

2. Using replaceAll method - The replaceAll method will remove all spaces with underscore. (must use global flag with it when using regex)

function updateKey()
{
    var key=$("#title").val();
    key=key.replaceAll(/ /g,"_");
    // key=key.replaceAll(" ","_"); also valid
    $("#url_key").val(key);
}
// Show case
let title = "Your document title";
console.log(title.replaceAll(/ /g,"_"));

3. Use a combination of split and join method - Split your string at spaces and join it by using _ as separator in the join method.

function updateKey()
{
    var key=$("#title").val();
    key=key.split(" ").join("_");
    $("#url_key").val(key);
}
// Show case
let title = "Your document title";
console.log(title.split(" ").join("_"));