Replacing spaces with underscores in JavaScript?
JavascriptStringJavascript Problem Overview
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);
}
Javascript Solutions
Solution 1 - Javascript
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.)
Solution 2 - Javascript
Solution 3 - Javascript
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,"_");
Solution 4 - Javascript
You can try this
var str = 'hello world !!';
str = str.replace(/\s+/g, '-');
It will even replace multiple spaces with single '-'.
Solution 5 - Javascript
I created JS performance test for it http://jsperf.com/split-and-join-vs-replace2
Solution 6 - Javascript
Replace spaces with underscore
var str = 'How are you';
var replaced = str.split(' ').join('_');
Output: How_are_you
Solution 7 - Javascript
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.
};
Solution 8 - Javascript
Just using replace
:
var text = 'Hello World';
new_text = text.replace(' ', '_');
console.log(new_text);
Solution 9 - Javascript
Replace all occurrences
This is happening because replace()
method is designed this way to replace only the first occurance when you use string to find the match. Check the replace method.
To replace all matches you can use the following 3 methods:
-
use regex with the global flag inreplace()
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,"_"));
-
Using replaceAll method:
The
replaceAll
method will remove all spaces with an underscore. (must use the 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,"_"));
<!-- end snippet -->
3. ## Use a combination of split
and join
method:
Split your string at spaces and join it by using _ as a separator in the join method.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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("_"));
<!-- end snippet -->
Solution 10 - Javascript
const updateKey = key => console.log(key.split(' ').join('_'));
updateKey('Hello World');
Solution 11 - Javascript
$(function() {
$('#title').keyup(function() {
var value = $(this).val().toLowerCase();
$('#url_key').val(value.split(' ').join('_'));
}).keyup();
});
-- or you can use:
$(function() {
$('#title').keyup(function() {
var value = $(this).val().toLowerCase();
$('#url_key').val(value.replace(/ /g,"_"));
}).keyup();
});