how to replace the last special character when I press a new one in javascript-CodePudding

Example:

if the main input value like this "1 23 " then I need to replace the last special character with a new one suppose I click new special characters like minus, multiplication, and divide symbol, etc.

my expected output:

when I click the minus symbol > "1 23- "
when I click the multiplication symbol > "1 23* "

<body>

<input type="text" id="Main">

<input class="ip" type="button" value="1" onclick="Cal(this)">
<input class="ip" type="button" value="2" onclick="Cal(this)">
<input class="ip" type="button" value="3" onclick="Cal(this)">

<input class="ip" type="button" value=" " onclick="Cal(this)">
<input class="ip" type="button" value="-" onclick="Cal(this)">
<input class="ip" type="button" value="*" onclick="Cal(this)">

</body>

<script>

 function Cal(btn)
 {
 document.getElementById("Main").value =btn.value;
 }

</script>

CodePudding user response：

This is what you want. I first test the last character of the input string with a regex detecting special characters, and if there is a special character inside the input and if the value of the button you pressed is a also a special character, I delete the last character from the string. And then at the end the value of the button you pressed is appended to the end of the string.

function cal(btn)
{
  let format = /[ `!@#$%^&*()_ \-=\[\]{};':"\\|,.<>\/?~]/;
  let input = document.getElementById("Main").value
  if(format.test(input.charAt(input.length - 1)) && format.test(btn.value)){
     input = input.slice(0, -1)
  }
  
  input  = btn.value;
  document.getElementById("Main").value = input
}

<body>

<input type="text" id="Main">

<input class="ip" type="button" value="1" onclick="cal(this)">
<input class="ip" type="button" value="2" onclick="cal(this)">
<input class="ip" type="button" value="3" onclick="cal(this)">

<input class="ip" type="button" value=" " onclick="cal(this)">
<input class="ip" type="button" value="-" onclick="cal(this)">
<input class="ip" type="button" value="*" onclick="cal(this)">

</body>

You can edit the regex to meet your exact needs.

CodePudding user response：

1) If last value is not number i.e it is a symbol and current value is also not a number. In short if last value is symbol and current value is also a symbol. In this case you have to remove the last value and append the current value

const display = document.getElementById("Main");
const appendValue = val => display.value  = val;
const isNumber = n => !isNaN(parseInt(n));

function Cal(btn) {
  const lastValue = display.value.slice(-1);
  const currentValue = btn.value;

  if (!isNumber(lastValue) && !isNumber(currentValue))
    display.value = display.value.slice(0, display.value.length - 1)   currentValue;
  else appendValue(currentValue);
}

<input type="text" id="Main">

<input class="ip" type="button" value="1" onclick="Cal(this)">
<input class="ip" type="button" value="2" onclick="Cal(this)">
<input class="ip" type="button" value="3" onclick="Cal(this)">

<input class="ip" type="button" value=" " onclick="Cal(this)">
<input class="ip" type="button" value="-" onclick="Cal(this)">
<input class="ip" type="button" value="*" onclick="Cal(this)">

2) You only have to append value, if it one of the following:

If there is no value(empty input) in input and current value is a number.
If last value is a number.
If last value is not a number and current value is a number

const display = document.getElementById("Main");
const appendValue = val => display.value  = val;
const isNumber = n => !isNaN(parseInt(n));

function Cal(btn) {
  const lastValue = display.value.slice(-1);
  const currentValue = btn.value;

  if ((!lastValue && isNumber(currentValue)) ||
    (isNumber(lastValue)) ||
    (!isNumber(lastValue) && isNumber(currentValue))) appendValue(currentValue);
  else display.value = display.value.slice(0, display.value.length - 1)   currentValue;
}

<input type="text" id="Main">

<input class="ip" type="button" value="1" onclick="Cal(this)">
<input class="ip" type="button" value="2" onclick="Cal(this)">
<input class="ip" type="button" value="3" onclick="Cal(this)">

<input class="ip" type="button" value=" " onclick="Cal(this)">
<input class="ip" type="button" value="-" onclick="Cal(this)">
<input class="ip" type="button" value="*" onclick="Cal(this)">