Estoy tratando de editar el tamaño de la imagen (ancho y alto) en la variable de cadena, pero necesito editarlo mediante la expresión Regex para tomar su ancho y alto y luego dividirlo por 2.
Por ejemplo:
Tengo imágenes en una variable de cadena.
const html = `<p><img alt="" src="https://media.cheggcdn.com/media%2F1cb%2F1cb8a6aa-8dbf-4cc1-90ae-e214d46eb4c1%2Fphp7FkMW8.png"style="height:34px;width:158px;" /></p><p><strong>explanation:</strong></p><p><strong><img alt="" src="https://media.cheggcdn.com/media%2F7f8%2F7f87506b-9fb5-421f-85e6-b283732266d2%2FphprAsgze.png"style="height:130px;width:387px;" /></strong></p>`Como puede ver, hay dos etiquetas img en esta variable.
El tamaño de la primera imagen es: (height:34px;width:158px;) .
El segundo tamaño de imagen es: height:130px;width:387px; .
Ahora, necesito editar el primer y el segundo tamaño de imagen para tomar su tamaño medio
Ejemplo para editar 34px alto: 34/2 = 17 y lo mismo para el ancho...
Entonces, el nuevo tamaño de altura es: 17px, luego reemplace el nuevo tamaño con su estilo CSS
El resultado final debería ser así:
const HTMl = `<p><img alt="" src="https://media.cheggcdn.com/media%2F1cb%2F1cb8a6aa-8dbf-4cc1-90ae-e214d46eb4c1%2Fphp7FkMW8.png"style="height:17px;width:79px;" /></p><p><strong>explanation:</strong></p><p><strong><img alt="" src="https://media.cheggcdn.com/media%2F7f8%2F7f87506b-9fb5-421f-85e6-b283732266d2%2FphprAsgze.png"style="height:65px;width:193.5px;" /></strong></p>`Espero que quede claro lo que necesito. puedes hacerlo por expresiones regulares o cualquier método que pueda hacer lo que necesito. ¡Gracias!
Antes de establecerlo en la variable const HTMl , puede crear variables para la altura y el ancho de las imágenes.
const firstImgWidth = 158; const secondImgWidth = 387; const firstImgHeight = 34; const secondImgHeight = 130;Luego puede interpolar estas variables con cadenas de plantilla, consulte la documentación
const html = `<p><img alt="" src="https://media.cheggcdn.com/media%2F1cb%2F1cb8a6aa-8dbf-4cc1-90ae-e214d46eb4c1%2Fphp7FkMW8.png"style="height:${firstImgHeight}px;width:${firstImgWidth}px;" /></p><p><strong>explanation:</strong></p><p><strong><img alt="" src="https://media.cheggcdn.com/media%2F7f8%2F7f87506b-9fb5-421f-85e6-b283732266d2%2FphprAsgze.png"style="height:${secondImgHeight}px;width:${secondImgWidth}px;" /></strong></p> De esta manera, podrá manipular sus atributos <imgs> fácilmente.
Si es posible, debe mirar la rica funcionalidad de los objetos del documento. MDN tiene buena documentación al respecto. Una buena propiedad de documento para comenzar es document.createElement .