2

Uso remark2react para transformar markdown en html, lo que me gustaría es poder separar cada frase por span y poder añadirle un id o clase a cada uno de eso span, por ejemplo, el numero de span que es.

Del siguiente markdown:

"**Lorem ipsum dolor sit amet, *consectetur adipiscing* elit.** Nullam auctor mauris nunc, nec condimentum purus aliquam et. Dr.Alba tiene una reunión. **Fusce at** bibendum dolor. Duis sit amet ante ut quam malesuada porta in id sem. Aliquam sit amet tellus ex. Quisque ac ultricies dui, vitae gravida ipsum. Morbi nec elit dictum, congue ipsum vitae, fringilla risus. *Sed nec enim ultrices*, tempus ipsum id, tempus mi. **In pretium massa a rutrum pellentesque**. Vivamus vel semper sem. Cras ac vehicula lectus, vel commodo ante. Quisque pretium eu nisl in pulvinar. "

Me genera el siguiente código html:

<p><strong>Lorem ipsum dolor sit amet, <em>consectetur adipiscing</em> elit.</strong> Nullam auctor mauris nunc, nec condimentum purus aliquam et. Dr.Alba tiene una reunión. <strong>Fusce at</strong> bibendum dolor. Duis sit amet ante ut quam malesuada porta in id sem. Aliquam sit amet tellus ex. Quisque ac ultricies dui, vitae gravida ipsum. Morbi nec elit dictum, congue ipsum vitae, fringilla risus. <em>Sed nec enim ultrices</em>, tempus ipsum id, tempus mi. <strong>In pretium massa a rutrum pellentesque</strong>. Vivamus vel semper sem. Cras ac vehicula lectus, vel commodo ante. Quisque pretium eu nisl in pulvinar. </p>

Pd: Hacer un split separandolo con un punto no serviría ya que hay frases que contienen un . como "Dr.Alba", por frase me refiero a frases separadas por un punto.

Edit:

Output esperado:

<p>
  <span id="span-1"><strong>Lorem ipsum dolor sit amet, <em>consectetur adipiscing</em> elit.</strong></span>
  <span id="span-2">Nullam auctor mauris nunc, nec condimentum purus aliquam et.</span>
  <span id="span-3">Dr.Alba tiene una reunión.</span>
  <span id="span-4"><strong>Fusce at</strong> bibendum dolor.</span>
  <span id="span-5">Duis sit amet ante ut quam malesuada porta in id sem.</span>
  <span id="span-6">Aliquam sit amet tellus ex.</span>
  <span id="span-7">Quisque ac ultricies dui, vitae gravida ipsum.</span>
  <span id="span-8">Morbi nec elit dictum, congue ipsum vitae, fringilla risus.</span>
  <span id="span-9"><em>Sed nec enim ultrices</em>, tempus ipsum id, tempus mi.</span>
  <span id="span-10"><strong>In pretium massa a rutrum pellentesque</strong>.</span>
  <span id="span-11">Vivamus vel semper sem.</span>
  <span id="span-12">Cras ac vehicula lectus, vel commodo ante.</span>
  <span id="span-13">Quisque pretium eu nisl in pulvinar.</span>
</p>
3
  • ¿Qué es una frase? ¿Qué delimita a una frase?
    – r4ziel
    Commented el 4 sept. 2020 a las 10:57
  • Una frase viene delimitada por un ". " Commented el 4 sept. 2020 a las 11:00
  • Lo que quieres hacer no tiene una solución alcanzable sin una IA o un programa analizador de textos muy avanzado: El lenguaje natural tiene un contexto y una semántica que no se puede analizar con un simple parser. ¿Cuándo un punto es el final de una frase y cuándo no? Eso lo sabemos analizando el texto, comprendiéndolo. Commented el 10 sept. 2020 a las 9:27

1 respuesta 1

7
+25

Explicación

Puedes manejar el texto tu mismo sin usar una librería, mediante el uso del método (https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/replace):

.replace()

Este método recibe como primer parámetro un string o una expresión regular que te permitirá capturar la parte del string que se quiere remplazar .replace(/\*/gi, ''); (en el ejemplo el target de la regexp son los *), el segundo parámetro puede ser un string o una funcion .replace(/(\*).*?(\*)/gi, '<em class="my-custome-class">ejemplo</em>') (en el ejemplo el target de la regexp es el texto como *ejemplo*).

para que al remplazar el texto contenga el match de la expresión regular puedes usar una función o los caracteres reservados del método:

Carácter reservado:

$$ Inserta una "$". $& Inserta la subcadena emparejada. $` Inserta la sección de cadena que precede a la subcadena emparejada. $' Inserta la porción de subcadena que sigue a la subcadena emparejada. $n o $nn Donde n o nn son dígitos decimales positivos menores a 100, inserta la subcadena emparejada de orden n del paréntesis, proporcionado por el primer argumento del objeto RegExp.

"*prueba*exterior".replace(/(\*).*?(\*)/gi, `<em class="my-custome-class">$&</em>`)

"<em class="my-custome-class">*prueba*</em>exterior"

Función:

"**prueba**exterior".replace(/(\*\*).*?(\*\*)/gi, (e, x, y) => {
     // Los parámetros de esta función son :
     // e: el match de la expresión regular **prueba**
     // x: es el primer miembro de la expresión ** (aqui no se utiliza)
     // y: es el segundo miembro de la expresión **  (aqui no se utiliza)
     // se tiene que retornar el string que va a remplazar el target de la RegExp
     // Math.random() emula el id que nesecitas
     // remplazamos los ** del match **prueba** con ${e.replace(/\*\*/gi, '')} o puedes hacerlo con los otros parámetros de la función x, y
     return `<span id="${Math.random()}">${e.replace(/\*\*/gi, '')}</span>`
})

"<span id="0.7625286134959541">prueba</span>exterior"

Solución

Text:

var txt = "**Lorem ipsum dolor sit amet, *consectetur adipiscing* elit.** Nullam auctor mauris nunc, nec condimentum purus aliquam et. Dr.Alba tiene una reunión. **Fusce at** bibendum dolor. Duis sit amet ante ut quam malesuada porta in id sem. Aliquam sit amet tellus ex. Quisque ac ultricies dui, vitae gravida ipsum. Morbi nec elit dictum, congue ipsum vitae, fringilla risus. *Sed nec enim ultrices*, tempus ipsum id, tempus mi. **In pretium massa a rutrum pellentesque**. Vivamus vel semper sem. Cras ac vehicula lectus, vel commodo ante. Quisque pretium eu nisl in pulvinar. "

Replace:

var result = txt.replace(/(\*\*).*?(\*\*)/gi, (e) => `<span id="${Math.random()}">${e.replace(/\*\*/gi, '')}</span>`).replace(/\*\*/gi, '').replace(/(\*).*?(\*)/gi, `<em class="my-custome-class">$&</em>`).replace(/\*/gi, '');

Output:

"<span id="0.3910003834229481">Lorem ipsum dolor sit amet, <em class="my-custome-class">consectetur adipiscing</em> elit.</span> Nullam auctor mauris nunc, nec condimentum purus aliquam et. Dr.Alba tiene una reunión. <span id="0.24210805376268052">Fusce at</span> bibendum dolor. Duis sit amet ante ut quam malesuada porta in id sem. Aliquam sit amet tellus ex. Quisque ac ultricies dui, vitae gravida ipsum. Morbi nec elit dictum, congue ipsum vitae, fringilla risus. <em class="my-custome-class">Sed nec enim ultrices</em>, tempus ipsum id, tempus mi. <span id="0.230139778475964">In pretium massa a rutrum pellentesque</span>. Vivamus vel semper sem. Cras ac vehicula lectus, vel commodo ante. Quisque pretium eu nisl in pulvinar. "

var txt = "**Lorem ipsum dolor sit amet, *consectetur adipiscing* elit.** Nullam auctor mauris nunc, nec condimentum purus aliquam et. Dr.Alba tiene una reunión. **Fusce at** bibendum dolor. Duis sit amet ante ut quam malesuada porta in id sem. Aliquam sit amet tellus ex. Quisque ac ultricies dui, vitae gravida ipsum. Morbi nec elit dictum, congue ipsum vitae, fringilla risus. *Sed nec enim ultrices*, tempus ipsum id, tempus mi. **In pretium massa a rutrum pellentesque**. Vivamus vel semper sem. Cras ac vehicula lectus, vel commodo ante. Quisque pretium eu nisl in pulvinar. "

var result = txt.replace(/(\*\*).*?(\*\*)/gi, (e) => `<span id="${Math.random()}">${e.replace(/\*\*/gi, '')}</span>`).replace(/\*\*/gi, '').replace(/(\*).*?(\*)/gi, `<em class="my-custome-class">$&</em>`).replace(/\*/gi, '');
.my-custome-class {
color: red
}
"<span id="0.3910003834229481">Lorem ipsum dolor sit amet, <em class="my-custome-class">consectetur adipiscing</em> elit.</span> Nullam auctor mauris nunc, nec condimentum purus aliquam et. Dr.Alba tiene una reunión. <span id="0.24210805376268052">Fusce at</span> bibendum dolor. Duis sit amet ante ut quam malesuada porta in id sem. Aliquam sit amet tellus ex. Quisque ac ultricies dui, vitae gravida ipsum. Morbi nec elit dictum, congue ipsum vitae, fringilla risus. <em class="my-custome-class">Sed nec enim ultrices</em>, tempus ipsum id, tempus mi. <span id="0.230139778475964">In pretium massa a rutrum pellentesque</span>. Vivamus vel semper sem. Cras ac vehicula lectus, vel commodo ante. Quisque pretium eu nisl in pulvinar. "

Imagen al final del post

introducir la descripción de la imagen aquí

2
  • Lo que me gustaría es a partir del html que se ha generado, poder separar cada frase por span, siendo lo que acabo de añadir como edit el resultado, fallo mio al no poner el output que esperaba, pero tu respuesta me parece muy útil para otros casos! Commented el 7 sept. 2020 a las 8:10
  • Hola si donde lo capturas el texto te permite poner enters (\n, salto de línea) , si que puedes hacer una expresión regular para capturar los puntos que son seguidos por un \n lo que te permitiría reconocer párrafos ( como esta en la Imagen al final del post lo azul son los match de la regexp), claro esta que esto no es dinámico y queda a interpretación de la persona que ingrese el texto en ese caso donde necesitas contextualizar las coincidencias si necesitarías como dice @Pablo Lozano, un motor que comprenda lenguaje natural. Commented el 11 sept. 2020 a las 15:19

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.