如何在键入时替换双括号之间的字符串

Question

我想制作一个包含文件的表单。字段的值将替换模板中双括号之间的字符串。这里的例子：

1. 首先，我在id为"的字段中键入值；用户名">
2. 第二，带有双括号{{username}}的<textarea></textarea>之间的字符串(即它自加载以来一直存在(将替换为我在第一种形式中键入的值

我尝试了同样的方法，但它不适用于我的情况。

Answer 1

这里有一种方法：

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

或者，

从结果中分离模板，这样你就可以定义模板并更新用户名或任何其他字段，而无需在输入第一个字符后进行检查和修复，如果模板是预定义的，就会发生这种情况。

// 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

。

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>