How to replace a string between double brackets while typing?

Question

I want to make a form that contains a filed. Value of field will replace a string between double bracket in the template. here example :

1. first, I type value in field with id "username".
2. second, the string between <textarea></textarea> with double bracket {{username}} (which is It has been around since it was loaded) will replace by value that I type in first form.

I try the same thing like this but it's not work with my case.

Answer 1

Here's a way how you could do it:

 const textarea = document.querySelector('textarea'); const inputs = [...document.querySelectorAll('input[id]')]; const template = textarea.value; function update() { textarea.value = inputs.reduce((acc, i) => acc.replace(new RegExp(`\\\\{\\\\{\\\\s*${i.id}\\\\s*\\\\}\\\\}`, 'g'), i.value), template); } inputs.forEach(e => e.addEventListener('input', update)); update();

 <label for="username">Username:</label> <input id="username" /> <br /> <label for="age">Age:</label> <input id="age" /> <br /><br /> <textarea readonly="readonly">user: {{username}} age: {{age}}</textarea>

Answer 2

Alternatively,

Split template from the result, this way you can define the template and update the username or any other fields without needing to go through it and fix after you entered first char which is what will happen if the template is ever predefined.

 // define fields let fields = { 'username': document.querySelector('input[name="username"]'), 'when': document.querySelector('input[name="when"]') } // working textareas const template = document.querySelector('textarea[name="template"]'); const textarea = document.querySelector('textarea[name="template-rendered"]'); // get fields values and render into textarea value function renderTemplate() { let vars = {} for (let field in fields) if (fields[field].value) vars[field] = fields[field].value textarea.value = template.value.replace(/\\{{[ ]{0,}([\\w\\_-]{1,})[ ]{0,}}}/gi, function(...match) { return typeof vars[match[1]] !== 'undefined' ? vars[match[1]] : `{{ ${match[1]} }}` }) } // template update event template.addEventListener('input', renderTemplate); // attach input events for (let field in fields) fields[field].addEventListener('input', renderTemplate);

 div { margin-bottom: 10px; } textarea { height: 50px; width: 100% }

 <div> <label for="username">Username:</label> <input name="username" /> </div> <div> <label for="when">When:</label> <input id="when" name="when" /> </div> <div> <label for="username">Template:</label> <textarea id="template" name="template">Hello {{ username }}, how are you {{ when }}?</textarea> </div> <div> <label for="result">Result:</label> <textarea id="result" name="template-rendered"></textarea> </div>

Answer 3

after a few tries finally.

 function myFunction(value) { String.prototype.replaceAt = function(index,index2, replacement,awal) { return this.substr(awal.length-index, index+2) + replacement + this.substr(index2); } var p=document.getElementById("p"); var str = p.value; var index1 = str.indexOf("{{"); var index2 = str.indexOf("}}"); var awalan=str.split('{{')[0]; p.value=(str.replaceAt(index1,index2, value,awalan)); }

 <input onInput="myFunction(this.value)"/> <br> <br> <Textarea id="p">my name is {{username}} im living on earth.</textarea>