Как изменить и отслеживать изменения в текстовом поле

Question

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

В основном часть приложения, которое я разрабатываю, включает размещение «заполнителей» в текстовом поле, а затем изменение этих заполнителей за пределами текстового поля.

Например:

This is the <first> placeholder. This is the <second> placeholder. 
This is the <first> placeholder again. 

В принципе у меня есть JS, который определяет эти заполнители и создает поля ввода для сохранения текста. Таким образом, будет введен текстовое поле для сначала и одно для секунд.

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

Я пытаюсь выяснить, как я могу отслеживать заполнители в текстовой области. Например, если заполнителем был <first_name>, и я начал печатать в текстовом поле заполнителей «Билли». Я мог бы легко изменить местозаполнитель, используя функцию замены строки. Однако теперь местозаполнитель <first_name> не существует в текстовом поле, и теперь я не могу вернуться и изменить его. Мне нужно иметь способ отслеживать эти заполнители, пока они меняются.

Надеюсь, это имеет смысл.

Answer 1

Если вы не связаны с элементом <textarea>, вы можете попробовать с помощью простого div с атрибутом contenteditable="true". Таким образом, вы можете использовать некоторые <span>, чтобы отметить все заполнители.

Я установил demo on jsfiddle, попробуйте.

Answer 2

Использование элемента с contenteditable="true" будет проще для выполнения этой задачи, потому что вы могли бы представить в качестве заполнителей span элементов, и вы бы тогда только извлечь их id или любым другим уникальным attribute обновлять их содержание.

Если есть, чтобы использовать textarea и пользователи могут изменять только его содержимое с помощью внешних входов, может быть, вы могли бы первоначально отслеживать index каждого placeholers и их length и сохранить те синхронизируются значения изменяются.

Затем вы можете легко заменить содержимое в textarea. Например, если заполнитель начинается с 15 и имеет длину 13

var string = 'this is a test {placeholder} bla bla bla', 
     placeHolderIndex = 15, 
     placeHolderLength = 13; 

    string = 
     string.substring(0, placeHolderIndex) 
     + 'new value' 
     + string.substring(placeHolderIndex + placeHolderLength); 

//update indexes of every placeholders that comes after this 
//one and update the content length of this placeholder. 

Очевидно, что вы не хотите, чтобы жёстко любые значения, и вы хотите, чтобы справиться с этим процессом в динамике, но это просто пример.

ПРИМЕЧАНИЕ. Я думаю, пользователи могут изменять содержимое textarea, если вы его используете. В этом случае это сделало бы вещи более сложными, потому что вам нужно было бы обновить index заполнителей для всех модификаций, которые делает пользователь, и вам также придется помешать им напрямую редактировать текст, привязанный к заполнителям.