1

I have this:

var $string = 'hello,world';

$(".content").text(function(i, $string) {
    return $string.replace(/,/g, ", ");
});

Aiming to add comma after space. What am I doing wrong? The problem is likely how I am using the variable in the function. Entry level stuff.

Henrik Petterson
  • 6,862
  • 20
  • 71
  • 155
  • 2
    Are you trying to change the `$string` variable or the text of the `.content` element? Your code seems to indicate both, but only the latter will work. – Rory McCrossan Jan 26 '18 at 14:27
  • 1
    Possible duplicate of [Regex to add a space after each comma in Javascript](https://stackoverflow.com/questions/7621066/regex-to-add-a-space-after-each-comma-in-javascript) – urbz Jan 26 '18 at 14:27
  • `$(".content").text($string.replace(/,/g, ", "));` is working fine. – Striped Jan 26 '18 at 14:29
  • @RoryMcCrossan I am trying to change the `$string` variable by adding space after comma and then insert it into `.content`. You mentioned in an answer that you had a solution to this without creating a function? – Henrik Petterson Jan 26 '18 at 14:30
  • 1
    See my comment on @RenzoCC's answer. Also note that `$string` shouldn't have the `$` prefix as it holds a string, not a jQuery object. – Rory McCrossan Jan 26 '18 at 14:30
  • Yes, basically the problem is that you are mistaken about the use of $string argument in the inner function here. First, it will *hide* the other $script value is 'hello, world' . And as [per the docs](http://api.jquery.com/text/#text-function), this $string argument will be populated with the current value of the text of the element you are trying to modify. – Pac0 Jan 26 '18 at 14:32
  • @RoryMcCrossan I haven't come across info on why I shouldn't use the `$` prefix for string variables. Is this a standard practice when coding JS? – Henrik Petterson Jan 26 '18 at 14:33
  • It's standard practice for jQuery: https://stackoverflow.com/questions/205853/why-would-a-javascript-variable-start-with-a-dollar-sign – Rory McCrossan Jan 26 '18 at 14:34

3 Answers3

3

Don't include arguments in your anonymous function since this is overwriting your $string value... As suggested by @RoryMcCrossan you don't need a function

var $string = 'hello,world';

$(".content").text($string.replace(/,/g, ", "));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content"></div>
Renzo Calla
  • 7,486
  • 2
  • 22
  • 37
1

For your understanding, your code is currently working like this one : 

var $anotherstring = 'hello,world';

$(".content").text(function(i, $string) {
    return $string.replace(/,/g, ", ");
});

(because the inner variable parameter of function is not the same as the first one, and hide the first $string you defined with the same name)

The way you are using text with the inner function(i, $string) will work if the current text value of the element is 'hello,world'

(see the jquery documentation)

$(".content").text('hello,world'); // just to set the value of the .content element for the example, you can ignore this if this already the case

$(".content").text(function(i, $string) {
    return $string.replace(/,/g, ", ");
});

So the above code will work if you want to transform the existing content.

If you simply want to use the value of another variable, and not the old content of the .content element, you can simply do :

var $string = 'hello,world';

$(".content").text($string.replace(/,/g, ", "))
Pac0
  • 21,465
  • 8
  • 65
  • 74
1

Try this way

let $str = 'hello,world';
$(".content").text($str.replace(/,[s]*/g, ", "));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content"></div>
Force Bolt
  • 1,117
  • 9
  • 9