El objetivo final de esta función es permitir que los usuarios seleccionen marcadores de posición en las plantillas de mensajes (los nombres de las variables son texto entre %). La motivación del regate La API devuelve cadenas en el formato siguiente.
"Hola %First_Name% %Middle_Name% %Last_Name%, Según los registros de asistencia del personal en %Message_Title%, los siguientes autos no se han vendido hoy %Day%:%Employee_Name% debe investigar por qué no hay registro".
A partir de ahora, reemplazo el % con etiquetas de apertura y cierre. Utilizo un div editable para mostrar esto como se muestra aquí . Quiero que el usuario pueda hacer clic en las etiquetas, por ejemplo, First Name Middle_Name, etc. para agregar el marcador de posición a cualquier punto del texto y eliminar las etiquetas de marcador existentes. Me gustaría saber:
Espero que esté buscando el atributo contenteditable="true" . este atributo permite al usuario editar contenido sin codificación adicional. y puede obtener el contenido del texto con la propiedad innerText
let button = document.querySelector('#getContent'); button.onclick = ()=>{ let textContent = document.querySelector('.content').innerText; console.log(textContent); } .editable{ padding: 0.25rem 0rem; background:pink; } <p class="content">Hello <span class="editable" contenteditable="true"> First Name</span> <span class="editable" contenteditable="true">Last Name</span>, Per the ............................</p> <button id="getContent">Get content</button>