Controlling the display of things typed in text input (with JS)?

Question

Is there a way to change the display of a text input with JS?

for example: I input in a text field input: "help please"

and i want it do be displayed directly as it is typed (within the text input as: "help ******"

So just the second word will be changed to "*****", but it has to keep its value when submitted

Answer 1

Try utilizing input event , .replace()

var text = "", res = "";

document.querySelector("input").oninput = function() {

  this.value = this.value.replace(/p(?=l)|l(?=e)|e(?=a|s)|a|s|e\s/, function(m) {
      text += m
      return "*"
  });
  
  if (this.value.length > 10 && this.value.slice(-2) === "*e") {    
    text += this.value.slice(-1);
    this.value = this.value.replace(/e$/, "*");   
    res = this.value.slice(0, 5).concat(text);
    // do stuff with `res`
    document.querySelector("label").innerHTML = res;
    text = res = "";
  }  
}

<input type="text" /><label></label>