Блог

Главная - Вопросы по программированию - Как заменить строку между двойными скобками при вводе?

Как заменить строку между двойными скобками при вводе?

#javascript #html

#javascript #HTML

Вопрос:

Я хочу создать форму, содержащую файл. Значение поля заменит строку между двойными скобками в шаблоне. вот пример :

  1. сначала я ввожу значение в поле с идентификатором «username».
  2. во-вторых, строка между <textarea></textarea> двойными скобками {{username}} (которая существует с момента ее загрузки) будет заменена значением, которое я ввожу в первой форме.

Я пробую то же самое, но это не работает в моем случае.

Ответ №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>

Комментарии:

1. почти правильно, но когда я говорю шаблон, я имею в виду, что в начале есть какая-то строка между двойными скобками textarea . например, так: <textarea>name : {{username}}</textarea> когда я ввожу некоторое значение в поданном тексте с идентификатором username, оно заменяет {{username}} в текстовой области. Я меняю ваш код с помощью replace addEventListener, прослушивая поле username, но он просто читает первый символ.

2. @DanielAlfianto Но это именно то, что делает этот код. Если вы вводите name: {{username}} в текстовой области, текст будет заменен на name: xxx и xxx будет значением в #username

3. Я имею в виду, что пользователь не может ничего вводить в текстовой области. пользователь вводит только текст в поле, который заменит строку между двойными скобками в текстовой области, которая была там с момента первой загрузки.

4. @DanielAlfianto Я знаю, что вы имеете в виду, проверьте обновленный ответ

5. очень приятно. большое вам спасибо. это то, что мне нужно. идентификаторы будут соответствовать тому, что указано в двойных скобках. большое вам спасибо

Ответ №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>

Комментарии:

1. большое вам спасибо, это мне очень помогло. Как вы думаете, я могу зациклить переменную с помощью php, чтобы указать не только имя пользователя и время.. потому что форма, которую я создал, является динамической. или у вас есть какие-либо предложения?

2. конечно, вы могли бы определить массив полей и перебирать их, чтобы сгенерировать js, сохраняя то же соглашение, что и username и when , хотя, если вам нужны разные типы ввода, такие как dates или selects и т. Д., Это было бы немного сложнее. Если вы хотите разобрать шаблон на php и просто отправить поля, можно использовать то же регулярное выражение gist.github.com/lcherone/f7ef70406c7c84aeb7d64566afb63bb8

Ответ №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>