2

Necesito hacer lo siguiente y es que en el código HTML de una imagen, cuando no tenga un class="xxx", lo añada.

Tengo el siguiente código pero no hay manera de que funcione:

<img(.*?)^(?!class)(.*?)\/>

sutituyendo por

<img class="mimg"$1$2/>

Quiero que <img src="url foto" width="20" heigh="34">
Sea finalmente <img class="mimg" src="url foto" width="20" heigh="34" />

4
  • Pero ¿qué estás utilizando para realizar la sustitución? ¿alguna utilidad de tu editor de código? Commented el 2 ene. 2018 a las 12:00
  • Hola Asier, si era para realizar una sustitución en unos 1500 archivos utilizando Dreamweaver, lo solucioné con el código de Marcos.
    – chelssi
    Commented el 2 ene. 2018 a las 15:54
  • @chelssi modifiqué tu pregunta para agregar la etiqueta dreamweaver. Las preguntas de regex siempre deben indicar el lenguaje de programación o la herramienta utilizada. Más info en es.stackoverflow.com/tags/regex/info
    – Mariano
    Commented el 2 ene. 2018 a las 19:55
  • 1
    No habia leido los comentarios, ya reverti el cambio.
    – user22539
    Commented el 2 ene. 2018 a las 20:02

3 respuestas 3

2

El problema es que la expresión (.*) habilita la presencia de cualquier cadena.

Solución:

<img((?![^>]* class=))([^>]*)>

Demo:

// Reemplaza
var input = '<img src="url foto" width="20" heigh="34"/>';
var re = /<img((?![^>]* class=))([^>]*)>/g;
var output = input.replace(re, '<img class="mimg"$2>');
console.log(input);
console.log(output);

// No hace nada
input = '<img src="url foto" class="algo" width="20" heigh="34"/>';
output = input.replace(re, '<img class="mimg"$2>');
console.log(input);
console.log(output);

3
  • Gracias Marcos, me funcionó perfecto.
    – chelssi
    Commented el 2 ene. 2018 a las 15:53
  • 1
    Buena respuesta. El primer grupo es innecesario, $1 siempre va a ser una cadena vacía ... Y marcaría algunos casos en los que fallaría. Ejemplos: HTML con comentarios, <img src="unasteclassinletras.jpg"/>, etc.
    – Mariano
    Commented el 2 ene. 2018 a las 19:51
  • 1
    @Mariano, toma nro 3! :P
    – Marcos
    Commented el 2 ene. 2018 a las 20:03
0

Una buena opción, entiendo yo, es usar jQuery:

$( "#imagen1" ).addClass( "nuevaClase" );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img id="imagen1" src="url foto" width="20" heigh="34"> 

2
  • 1
    El autor no está usando JavaScript... Y si fuese el caso, ¿Para qué agregar una referencia a jQuery cuando se puede hacer de forma nativa?
    – Mariano
    Commented el 2 ene. 2018 a las 19:53
  • 1
    Efectivamente. Así es. Commented el 2 ene. 2018 a las 20:11
0

Si quieres que asigne la clase "mimg" a un elemento del dom, en adición a las clases que éste pueda tener de antemano:

function addClass(elemento, clase) {
  var clases=(elemento.className||'').split(' ');
  if(clases.indexOf(clase)===-1) {
    clases.push(clase);
  }
  elemento.className=clases.join(' ');

}

var div1=document.getElementById('div1');
addClass(div1,'mimg');
    
.clase1 {
  background:#CCCCFF
}
.clase2 {
width:100px;
height:100px;
}

.mimg {
border: 1px solid red;
}
<div id="div1" class="clase1 clase2" src="url foto" ></div>

2
  • En vez de esto, creo que conviene usar div1.classList.add('mimg')... De todas formas, el autor no está usando JavaScript.
    – Mariano
    Commented el 2 ene. 2018 a las 19:43
  • 1
    Lol, todos estos años y no sabía de la existencia de classList. Y, nuevamente, me equivoqué por no fijarme que la pregunta no es de JS. Damn
    – ffflabs
    Commented el 4 ene. 2018 a las 11:20

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.