我正在研究一个根据用户输入生成内容的系统。
用户输入：
名字：克里斯
现状：无奈
生成的内容：
这个网站是关于 Chris 的，他目前无助。
为了让用户稍后更改名字或当前状态，我需要将页面中的实际文本与输入名称关联起来，如下所示：
This site is about <span class="first-name">Chris</span> and he is currently
<span class="current-state">helpless</span>.
如何在不使用跨度的情况下执行此操作，如上例所示？我似乎无法找到适合此的HTML标记。
编辑：很难解释为什么我不能使用跨度。我无法使用跨度，因为我使用跨度作为目标来表示页面中的可编辑区域。使用跨度以达到上述目的最终会导致过于复杂而无法在此描述的问题。
编辑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>