1

Hola, ocupo poner este contenido en forma de lista con su id

<div class="elemento">
Mascota: Perro;
País: Venezuela;
Explorador: Chrome;
Lenguaje: Español; 
</div>

<div class="elemento lista">
<ul>
<li id="Mascota"><span>Mascota:</span> <span>Perro</span></li>
<li id="País"><span>País:</span> <span>Venezuela</span></li>
<li id="Explorador"><span>Explorador:</span> <span>Chrome</span></li>
<li id="Lenguaje"><span>Lenguaje:</span> <span>Español</span></li>
</ul>
</div>

¿Alguna idea de como hacerlo?

4
  • Hola Rolando. Bienvenido! ¿Podrías explicar un poco mejor? ¿De dónde obtenés el texto original? ¿Está en la página cargada por el navegador? ¿Por qué está en ese formato? ¿No se podría generar correctamente desde el servidor? ¿Podría variar / cómo?
    – Mariano
    el 15 ago. 2016 a las 5:23
  • Hola Mariano gracias. ¿No se podría generar correctamente desde el servidor? - si se puede, pero la idea es facilitar a la persona a poner los datos sin necesidad de colocar los divs en un editor de texto ya que algunos no tienen conocimiento de etiquetas html. ¿Podría variar / cómo? - los valores pueden variar según la persona que lo envié. ¿De dónde obtenés el texto original? el 15 ago. 2016 a las 5:57
  • O sea que es un texto generado por un usuario... ¿Deberías validarlo? ¿Desde dónde se genera el HTML? ¿Lo haceel usuario manualmente o se genera por javascript/PHP/otro?
    – Mariano
    el 15 ago. 2016 a las 5:57
  • si el usuario envía la información mediante un editor de texto (como un post de foro) el 15 ago. 2016 a las 6:00

1 respuesta 1

0

Si bien no termino de entender cómo es que se genera el texto y, entendiendo, seguramente recomendaría reemplazarlo a nivel del servidor, esta es una alternativa que logra lo que estás buscando. Ofrece una validación mínima, pero va a depender de que los usuarios ingresen el texto siguiendo el formato exacto.

Código

// Obtener todos los divs
var divs = document.getElementsByClassName('elemento');

// Valores a reemplazar
var regex = /^\s*([^:;\n<>]+?)\s*:\s*([^;\n<>]+?)\s*;\s*$/gm; 
var rempl = '<li id="$1"><span>$1:</span> <span>$2</span></li>'; 

// Iterar todos los divs cambiando el valor
for (var i = 0; i < divs.length; i++) {
    divs[i].innerHTML = '<ul>' + divs[i].innerHTML.replace(regex, rempl) + '</ul>';
}
<div class="elemento">
Mascota: Perro;
País: Venezuela;
Explorador: Chrome;
Lenguaje: Español; 
</div>

Descripción

Utilizamos la expresión regular /^\s*([^:;\n<>]+?)\s*:\s*([^;\n<>]+?)\s*;\s*$/gm para:

  • ^\s* coincidir con el inicio del texto, seguido de cualquier cantidad de espacios
  • ([^:\n<>]+?) seguido por caracteres que no sean :, ;, <, > ni saltos de línea (la clave)
  • \s*:\s* luego : opcionalmente con espacios alrededor
  • ([^;\n<>]+?) y caracteres que no sean ;, <, > ni saltos de línea (el valor)
  • \s*;\s* terminado con ; opcionalmente con espacios alrededor
  • $ y el fin de la línea.

Para reemplazarlo por

<li id="$1"><span>$1:</span> <span>$2</span></li>

Donde $1 es la clave y $2 es el valor.

3
  • Muchas gracias @Mariano funciona perfecto solo corregir el (</span>)$2</span> a (<span>) pero todo bien gracias :D el 15 ago. 2016 a las 6:26
  • @rolando Sí, lo había copiado de tu pregunta, pero ya lo corregí (actualizá la pregunta y lo verás bien)
    – Mariano
    el 15 ago. 2016 a las 6:27
  • :O vale perdón no me fije el 15 ago. 2016 a las 6:27

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.