I am not really sure why the replace doesn't work in my code.

Here is the code:

var x = "counting..."
function process(element){
  if(element.substr(element.length-3) == "..."){
    element.toString().replace("...","");
    console.log("works")
  }
  else{
    element  ='.'
  }
}
process(x)
setInterval(function(){console.log(x)},500)

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe> In the above example, my code will console it works, but the replace function will not change the ... to nothing.

Could anyone explain to me why this happens and give me a better solution?

CodePudding user response：

You pass element=xto the function, then use .toString(). This creates and returns another string, which is then acted upon by replace, which returns yet another string. You don't store the result anywhere, nor return it. It simply gets lost.

What you want to do instead is:

function process(str) {
    if (str.endsWith("..."))
        return str.substring(0, str.length - 3);
    return str   "."
}

x = process(x)

Note that I used .substring() to remove the last 3 characters since you already checked that the string ends with "...". If you use .replace() you run another unnecessary search and you also risk deleting some other occurrence of "..." in the middle of the string instead of the last one.

Also note that in the last line I am doing x = process(x), otherwise x will keep its value since .substring() (like .replace()) just returns a new string and does not modify the original.

See also the doc:

• String.prototype.replace()
• String.prototype.endsWith()

CodePudding user response：

You're replacing it but not setting x to the new value. Since it's already wrapped in a function, it's quite easy to just return the new value and set x to it. Your else statement also has this same problem. element is not a pointer, but a copy of x meaning they don't share a value. Try this:

var x = "counting..."

function process(element) {
  if (element.substr(element.length - 3) == "...") {
    return element.toString().replace("...", "");
    console.log("works")
  } else {
    return element   '.';
  }
}
x = process(x)
setInterval(function() {
  console.log(x)
}, 500)

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Couple of issues I could identify :

1. string arguments pass as value and any change made inside the function will not reflect in the original variable.
2. Process is called only once. And nothing is changing for your intervals caused by setInterval.
3. replace() is returning a new string so you have to save that value somewhere.

Below I have one approach, which is built upon yours:

I have passed in an object. Changes made to that object will reflect to the original object. And am returning the string so you can log it in interval created by the setInterval.

var x = { str :  "counting..."}

function process(element){
if(element.str.substr(element.str.length-3) == "..."){
  element.str = element.str.replace("...","");
}
else{
  element.str  ='.'
}
return element.str;
}

setInterval(function(){ console.log(process(x)); },500);

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Also, toString() is not required. Can omit it.

CodePudding user response：

also return the value..

var x = "counting..."
console.log(x.substr(x.length-3));
function process(element){
if(element.substr(element.length-3) == "..."){
  return element.toString().replace("...","");
  console.log("works")
}
else{
  return element  ='.'
}
}
setInterval(function(){console.log(process(x))},500)