Estoy trabajando en un requisito en el que tenemos que poner un enlace 'Leer más' después de cierto carácter de contenido HTML. Nos gustaría implementarlo de una manera que no rompa ningún HTML. Deberíamos colocar el enlace 'Leer más' antes de iniciar la apertura de una etiqueta HTML o después de completarla. Por ejemplo, si nuestro texto HTML es

 Lorem ipsum dolor sit amet, consectetur adipiscing elit.Integer dapibus sagittis <ul> <li>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> </ul>

Y nuestro punto de división de texto es de 100 caracteres, divide el contenido como

 Lorem ipsum dolor sit amet, consectetur adipiscing elit.Integer dapibus sagittis <ul> <li>1. Lorem ipsum dolor sit amet

No queremos eso. Queremos implementarlo de manera que si nuestro límite de caracteres cae entre las etiquetas HTML, el contenido debe dividirse antes de comenzar la etiqueta HTML o después de cerrarla. asi que deberia ser

 Lorem ipsum dolor sit amet, consectetur adipiscing elit.Integer dapibus sagittis --> Slice content here <ul> <li>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> </ul> --> Or slice content here

Estamos utilizando reactJS como nuestro marco de desarrollo. Aquí está nuestro código de corte de contenido

 const isLongContent = validContent.length > sliceLength const visibleContent = isLongContent ? validContent.slice(0, sliceLength) + '...' : validContent