Как заключить выделенный текст в тег привязки внутри строки как HTML в iframe?

Question

У меня HTML отображается внутри iframe, и сценарий таков: я хочу выделить / выделить текст внутри iframe и заключить его в тег привязки, чтобы добавить комментарии к нему.

<p>
  <em> "Records related to Safety Management System are kept for the appropriate period required by the various rules and securely disposed of when no longer required."</em>
</p>

У меня есть этот html отображается внутри iframe DOM, давайте предположим, что я выделю текст safety и заключил его в тег привязки, чтобы он выглядел следующим образом.

<p>
  <em>
   "Records related to" 
   <a href="#">Safety</a> 
   "Management System are kept for the appropriate period required by the various rules and securely disposed of when no longer required."
  </em>
</p>

вместо этого при добавлении привязки он по-прежнему отображается в виде строки:

<p>
  <em>
   "Records related to <a href="#">Safety</a> Management System are kept for the appropriate period required by the various rules and securely disposed of when no longer required."
  </em>
</p>

Любая идея, как я могу достичь желаемого результата ?? Помните, что все это внутри iframe.

это код, который я использую для добавления тега привязки:

let y = iframeSelection.baseNode.textContent.replace('Safety, '<a href="javascript"> Safety </a>')