我发现很难为这个问题提出一个问题标题，所以我道歉它相当神秘，但我会尝试在那里更好地解释。
基本上我正在开发的app的一部分涉及将'占位符'放在textarea中，然后修改textarea之外的那些占位符。
例如：
This is the <first> placeholder. This is the <second> placeholder.
This is the <first> placeholder again.
基本上我有JS检测这些占位符并创建输入框来保存文本。因此，第一个会有一个输入文本框，第二个会有一个输入文本框。
我想要实现的是当我在文本框中键入一个值时，它会将textarea中的占位符更改为输入到文本框中的内容。想想一个textarea的崇高文本编辑器的片段。
我正在试图弄清楚如何跟踪文本区域中的占位符。例如，如果占位符为<first_name>，我就开始在占位符文本框'Billy'中输入内容。我可以通过使用字符串替换功能轻松更改占位符。但是现在占位符<first_name>在textarea中不存在，所以现在我不能回去更改它。我需要有一种方法来跟踪这些占位符，同时它们正在改变。
我希望这是有道理的。
答案 0 :(得分：1)
如果您未绑定<textarea>元素，则可以尝试使用属性为contenteditable="true"的简单div。这样，您可以使用一些<span>来标记所有占位符。
我设置了demo on jsfiddle，试试吧。
答案 1 :(得分：0)
使用带有contenteditable="true"的元素对于该任务会更容易，因为您可以将占位符表示为span元素，然后您只需要通过id或任何其他唯一元素来检索它们attribute更新其内容。
如果您 使用textarea并且用户只能使用外部输入修改其内容，那么您最初可能会跟踪每个地方的index及其{ {1}}并在值发生更改时保持这些同步。
然后，您可以轻松替换length中的内容。例如，如果占位符从15开始并且长度为13。
textarea显然，您不想对任何值进行硬编码，并且您希望以动态方式处理此过程，但这只是一个示例。
注意：如果您使用的话，我猜用户可以修改 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，并且您还必须阻止它们直接编辑占位符映射的文本的