2

Tengo un string que no puedo aplicar estilos directamente por que carece de etiquetas: Ejemplo: <>.

Pero necesito poder aplicar estilos SOLAMENTE al precio (preferiblemente también el caracter $)

Este es el string:

$ 5,300,000.00 Características Dimensiones Casa Principal en un Nivel*Sala *Comedor *Cocina Equipada *Cuarto de lavado independiente *Dos Recamaras con Closet una cuenta con Tapanco *Dos Baños Completos *Palapa con tarja *Asador *Jardín *Estacionamiento para dos...

Y este es el HTML:

 <article>
     <p class="post-meta"> por <span class="author vcard"><a rel="author" title="Mensajes de Hector Jimenez Olmos" href="http://www.bienesraicestequisquiapan.com/author/hejiol/">Hector Jimenez Olmos</a></span> | <span class="published">Sep 7, 2016</span></p>OFERTA DE $ 2,700,000.00 BAJA A $ 2,450,000.00 Características Dimensiones OFERTA!!&nbsp;Casa en dos plantas *Amplio jardín con fuente al frente *Estacionamiento para varios autos, *Sala con chimenea *Bóveda catalana, *Estudio o Recamara *Comedor, *Amplia cocina con barra...               
 </article>

Nótese que el string no esta envuelto en la etiqueta <p>.

Y también en todos los casos, el string tiene esta estructura:

$(precio en integer)

Necesito darle un estilo solo al precio para resaltarlo

Ejemplo:

font-weight: bold;
color: red;
font-style: italic;

¿Cómo se puede lograr esto usando jquery?

1
  • 1
    Agustín, el HTML que colocaste en tu pregunta ¿lo obtienes de algún lado o lo creas?, si lo obtienes de una fuente de información que no puedes modificar es decir, si no puedes modificar la estructura de los datos, según esta respuesta, no es posible aplicar estilos al texto. La respuesta del usuario JuankGlezz te puede ayudar. el 8 sep. 2016 a las 16:00

3 respuestas 3

4

Te propongo usar , ya que puede simplificar muchas lineas de código, tal vez sea un poco tediosa de comprender a la hora de modificar el código.

Explicando el regex /\$\s*(\d){1,3}((\,\d{3})+)?\.\d{2}/g:

Toda expresión regular puede o no empezar con ^ y puede o no terminar con $.

  1. \$ : Escapamos el signo $ por lo que comente anteriormente para eso agregamos un \ antes. Esto quiere decir que tiene que iniciar con $ el texto a buscar.

  2. \s* : Indica que puede o no haber un o varios espacios después del signo $.

  3. (\d){1,3} : Se esta indicando que puede haber únicamente de 1 a 3 números

  4. ((\,\d{3})+)? : Aquí hay varias cosas

    • (...)? : Esta indicando que lo que contiene adentro de los paréntesis puede estar o no.
    • (\,\d{3})+ : Indica que hay una coma y después le prosiguen por fuerza 3 números. El signo + indica que debe haber al menos 1 o más.
  5. \. : Se debe continuar por la fuerza con un punto.

    Nota: se debe hacer el escape \ para confundir con ., ya que el . indica que puede ser valido cualquier carácter individual excepto terminadores de línea: \n, \r, \u2028 o \u2029.

  6. \d{2} : Se debe terminar con al menos 2 decimales

Tu ejemplo funcionando con regex:

//esta linea podria ser en caso de que el texto este plano en un elemento
var str = "" + $("article").html();

//Expresion regular para buscar todas las coincidencias
var reg = /\$\s*(\d){1,3}((\,\d{3})+)?\.\d{2}/g

// buscamos las coincidencias
var match = str.match(reg);
console.log(match); //mostrando las coincidencias exactas

//reemplazamos las coincidencias con un elemento html
for (i = 0; i < match.length; i++) {
  str = str.replace(match[i], "<span class='precio'>" + match[i] + "</span>")
}
//mostramos el string en el elemento correspondiente usando jquery
$('article').html(str);
.precio {
  font-weight: bold;
  color: red;
  font-style: italic;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article>
  <p class="post-meta"> por <span class="author vcard"><a rel="author" title="Mensajes de Hector Jimenez Olmos" href="http://www.bienesraicestequisquiapan.com/author/hejiol/">Hector Jimenez Olmos</a></span> | <span class="published">Sep 7, 2016</span></p>
  OFERTA DE $ 2,700,000.00 BAJA A $ 2,450,000.00 Características Dimensiones OFERTA!!&nbsp;Casa en dos plantas *Amplio jardín con fuente al frente *Estacionamiento para varios autos, *Sala con chimenea *Bóveda catalana, *Estudio o Recamara *Comedor, *Amplia
  cocina con barra... $2,23.33
</article>

3
  • Me gusta esta solucion pero al implementar no me funciona. Lo que hago es poner directamente tu codigo entre script tags dentro de la pagina que quiero afectar pero no da resultado.
    – Agustin
    el 8 sep. 2016 a las 19:42
  • @Agustin He editado con el html que incluyes en la pregunta
    – JuankGlezz
    el 8 sep. 2016 a las 19:52
  • agregando un aporte: regexr.com te permite jugar y aprender un poco más sobre Expresiones Regulares :D
    – fredyfx
    el 12 abr. 2017 a las 19:01
2

No soy tan bueno como JuankGlezz en regex, así que aquí hay otra opción, probablemente mucho menos eficiente:

var miTexto = $('article').text();
var posIniciales = [], posFinales = [];
var finPrecio = " ";

// obtenemos las posiciones iniciales y finales del precio en el string, asumiendo que este inicia siempre por "$" y termina en el siguiente espacio " "
for(var i = 0; i < miTexto.length; i++) {
  if (miTexto[i] === "$") {
    posIniciales.push(i);
    searchIndex = (i + 2) + miTexto.substring(i + 2).indexOf(finPrecio);
    posFinales.push(searchIndex);
    }
}

// invertimos los dos array para no alterar las posiciones de las modificaciones en el siguiente paso
posIniciales.reverse();
posFinales.reverse();

// ponemos primero la última etiqueta que cierra, luego la última que abre, y así sucesivamente hasta llegar al inicio de la cadena
$.each(posFinales, function(index, value) {

  miTexto = miTexto.slice(0, value) + "</span>" + miTexto.slice(value);  

  miTexto = miTexto.slice(0, posIniciales[index]) + "<span class='featured-price'>" + miTexto.slice(posIniciales[index]);

});

// sustituimos el contenido actual por el generado
$('article').html(miTexto);
.featured-price {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
 <article>
     <p class="post-meta"> por <span class="author vcard"><a rel="author" title="Mensajes de Hector Jimenez Olmos" href="http://www.bienesraicestequisquiapan.com/author/hejiol/">Hector Jimenez Olmos</a></span> | <span class="published">Sep 7, 2016</span></p>
   OFERTA DE $ 2,700,000.00 BAJA A $ 2,450,000.00 Características Dimensiones OFERTA!!&nbsp;Casa en dos plantas *Amplio jardín con fuente al frente *Estacionamiento para varios autos, *Sala con chimenea *Bóveda catalana, *Estudio o Recamara *Comedor, *Amplia cocina con barra...               
 </article>

Edición: Tal y como lo solicita el OP en el comentario, le adapto el código para que funcione con su html y aplique el estilo inline (a pesar de ser una práctica poco recomendada).

var miTexto = $('article').html();
var posIniciales = [], posFinales = [];
var finPrecio = " ";

// obtenemos las posiciones iniciales y finales del precio en el string, asumiendo que este inicia siempre por "$" y termina en el siguiente espacio " "
for(var i = 0; i < miTexto.length; i++) {
  if (miTexto[i] === "$") {
    posIniciales.push(i);
    searchIndex = (i + 2) + miTexto.substring(i + 2).indexOf(finPrecio);
    posFinales.push(searchIndex);
    }
}

// invertimos los dos array para no alterar las posiciones de las modificaciones en el siguiente paso
posIniciales.reverse();
posFinales.reverse();

// ponemos primero la última etiqueta que cierra, luego la última que abre, y así sucesivamente hasta llegar al inicio de la cadena
$.each(posFinales, function(index, value) {

  miTexto = miTexto.slice(0, value) + "</span>" + miTexto.slice(value);  

  miTexto = miTexto.slice(0, posIniciales[index]) + "<span style='font-weight: bold;color: red;font-style: italic;'>" + miTexto.slice(posIniciales[index]);

});

// sustituimos el contenido actual por el generado
$('article').html(miTexto);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
 <article>
     <p class="post-meta"> por <span class="author vcard"><a rel="author" title="Mensajes de Hector Jimenez Olmos" href="http://www.bienesraicestequisquiapan.com/author/hejiol/">Hector Jimenez Olmos</a></span> | <span class="published">Sep 7, 2016</span></p>
   OFERTA DE $ 2,700,000.00 BAJA A $ 2,450,000.00 Características Dimensiones OFERTA!!&nbsp;Casa en dos plantas *Amplio jardín con fuente al frente *Estacionamiento para varios autos, *Sala con chimenea *Bóveda catalana, *Estudio o Recamara *Comedor, *Amplia cocina con barra...               
 </article>

2
  • Me gusta esta solucion pero al implementar no me funciona. Lo que hago es poner directamente tu codigo entre script tags situadas justo antes de la etiqueta body de cierre dentro de la pagina que quiero afectar pero no da resultado.
    – Agustin
    el 8 sep. 2016 a las 19:43
  • Ya modifiqué el código para que se adapte específicamente a lo que quieres.
    – Shaz
    el 8 sep. 2016 a las 20:32
0

No necesitas jQuery para conseguir lo que quieres, puedes hacerlo con el método replace de la clase String y una expresión regular:

var cadena = 'hglsdf 12 jig 3ñ iou4 jh56 ñh78ñ 9 ds0'
var numeros = cadena.replace(/[^0-9]/g, '')
console.log(numeros)  // 1234567890

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.