html - Attributing metadata to text -

i working on system generates content based on user's input.

user input:
first name: chris
current state: helpless

generated content:
site chris , helpless.

in order let user change first name or current state later on, need associate actual text in page input names so:

this site <span class="first-name">chris</span> ,  <span class="current-state">helpless</span>. 

how can without using spans in example above? can't seem find html tag suitable this.

edit: hard explain why can't use spans. unable use spans because using spans targets denote editable areas in page. using spans above purpose ends causing issues far complicated describe here.

edit 2: (including code comments)

the issue wrapping text nodes inside of <p> tags spans denote editable content. now, if put spans inside of of <p> tags (namely spans denote user inputs) end real bad results.

it ends looking this:

<p>     <span class="editable">this site about</span>      <span class="first-name">chris</span>      <span class="editable">and currently</span>      <span class="current-state">helpless</span>     <span class="editable">.</span> </p>  

instead of this:

<p>     <span class="editable">this site chris , helpless.</span> </p>