Every time a word enclosed by "" is typed in an input field, repeat it using JavaScript-CodePudding

I am trying to write some JavaScript so that every time I type a word enclosed by "", the word including the "" is instantly repeated whilst typing.

For example, when typing "Interesting", the input field would immediately display "Interesting.

It would need to work each type "" was used, so that it could be used many times in the input field.

I have the following code to automatically capitalise letters when typing in a input field:

document.addEventListener('DOMContentLoaded', function(){
    let input_note = document.getElementById('note_text');
    input_note.addEventListener('input', upThing)
})

function upThing(ev){
    ev.target.value = ev.target.value.toUpperCase();
}

This may provide a starting point but is still a long way off.

I am very new to JavaScript, so would be grateful for any help.

CodePudding user response：

You can use a Regular Expression to match for the quotes and then join the matches together in the label.

I also advice you change your real-time text transformation to be done through CSS instead of JavaScript, this is because if you change the value of an input while the client has their input position a few characters behind the last character, it'll be reset to the end.

const noteInput = document.getElementById("note-text");
const noteQuotes = document.getElementById("note-quotes");

noteInput.addEventListener("input", (event) => {
  noteQuotes.innerText = Array.from(event.target.value.toUpperCase().matchAll(/"(.*?)"/gm), (match) => match[0]).join(", ");
});

#note-text {
  text-transform: uppercase;
}

<input id="note-text" type="text">

<p id="note-quotes"></p>

Edit: I may have misunderstod your question. :)

CodePudding user response：

I would use REGEX expression to match the value from the input to begin with You can look up the regex expressions here

CodePudding user response：

My answer checks the last character to verify its a quote. Then determine if its the first quote or not by setting the value of the start variable. Then if its the last quote, append the value and reset the start variable.

let input_note = document.getElementById('note_text');
let start = -1;

input_note.addEventListener('input', upThing)

function upThing(ev){
    let obj = ev.target
    isQuote = (obj.value[obj.value.length-1] == "\"")
    
    if(isQuote && start == -1){
      start = obj.value.length;
    }
    else if(isQuote && start > -1){
      obj.value  = " "   obj.value.slice(start,obj.value.length-1)
      start = -1;
    }
    
}

#note_text {
  text-transform: uppercase;
}

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