Rodeando texto seleccionado con etiquetas

<ul class="contact">
<li class="first">Carnegie Mellon University</li>
<li>5000 Forbes Avenue, Pittsburgh, PA 15213</li>
</ul>

=>

<ul class="contact">
<li class="first">Carnegie Mellon University</li>
<li>[address]5000 Forbes Avenue, Pittsburgh, PA 15213[/address]</li>
</ul>

Imagina que abro una página web en un navegador y encuentro información útil en la página. Así que me gustaría seleccionar la información útil (por ejemplo, la dirección de la Universidad Carnegie Mellon) de la página y hacer clic en el botón "inyectar etiqueta" PARA IMPLEMENTARSE. Como resultado, el código fuente de la página se inyectará con un par de etiquetas (por ejemplo, [dirección] [/ dirección]) que rodean el texto seleccionado por el usuario. Luego guardaré el código fuente inyectado para su posterior procesamiento.

¿Alguien puede ayudar a sugerir una forma de implementar tal función? Soy realmente nuevo en las cosas de Javascript, así que por favor sea un poco detallado con su sugerencia.

Respuestas a la pregunta(1)

Su respuesta a la pregunta