我正在开发一个基于用户输入生成内容的系统。
用户输入：
名字：Chris
当前状态：无奈
生成的内容：
这个网站是关于克里斯的，他目前很无助。
为了让用户稍后更改名字或当前状态，我需要将页面中的实际文本与输入名称相关联，如下所示：
This site is about <span class="first-name">Chris</span> and he is currently
<span class="current-state">helpless</span>.
如果不使用上面示例中的跨度，我该如何做到这一点？我似乎找不到适合此的 HTML 标记。
编辑：很难解释为什么我不能使用跨度。我无法为此使用跨度，因为我使用跨度作为表示页面中可编辑区域的目标。将 span 用于上述目的也会导致问题过于复杂，无法在此处描述。
编辑2：（包括评论中的代码）
问题是我正在<p>用表示可编辑内容的跨度来包装标签内的所有文本节点。现在，如果我将跨度放在任何这些<p>标签中（即表示用户输入的跨度），我最终会得到真正糟糕的结果。
它最终看起来像这样：
<p>
<span class="editable">This site is about</span>
<span class="first-name">Chris</span>
<span class="editable">and he is currently</span>
<span class="current-state">helpless</span>
<span class="editable">.</span>
</p>
而不是这个：
<p>
<span class="editable">This site is about Chris and he is currently helpless.</span>
</p>