Tengo una imagen html como la siguiente:
<img class="post-thumb" src="https://1.bp.blogspot.com/-v4ekzlZEc/YZUZJjVN8tI/AAAAAAAChsA/GSOuME5yUYs_-G3OX1TfwCPcBGAsYHg/s72-w640-h426-c/402.JPG">Quiero usar JQuery para cambiar dinámicamente cualquier cosa que diga "/s72-" con "/s720-"
Tengo el siguiente código, pero mi expresión regular en el reemplazo es incorrecta, ya que la obtuve de algún lugar en línea.
$(document).ready(function(){ var dimension = 720; var image = $('.post-thumb'); image.attr({src : image.attr('src').replace(/w\B\d{2,4}/,'w' + dimension)}); });¿Por qué no usar reemplazar directamente con 's72' como:
$(document).ready(function() { var dimension = 720; var image = $('.post-thumb'); image.attr({ src: image.attr('src').replace('/s72', '/s' + dimension) }); console.log(image.attr('src')) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img class="post-thumb" src="https://1.bp.blogspot.com/-v4ekzlZEc/YZUZJjVN8tI/AAAAAAAChsA/GSOuME5yUYs_-G3OX1TfwCPcBGAsYHg/s72-w640-h426-c/402.JPG"> PD: solo consideré una instancia para modificar, si hay más para modificar, use replaceAll
$(document).ready(function() { var dimension = 720; var image = $('.post-thumb'); image.attr({ src: image.attr('src').replaceAll('/s72', '/s' + dimension) }); console.log(image.attr('src')) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img class="post-thumb" src="https://1.bp.blogspot.com/s72-v4ekzlZEc/YZUZJjVN8tI/AAAAAAAChsA/GSOuME5yUYs_-G3OX1TfwCPcBGAsYHg/s72-w640-h426-c/402.JPG">Referencia:
Simplemente puede usar la siguiente expresión regular para reemplazar el carácter fijo,
/g - will replace more than one occurrence
$(document).ready(function(){ var dimension = 720; var image = $('.post-thumb'); image.attr({src : image.attr('src').replace(/\/s2-/g, '/s'+dimension)); });Usando JavaScript nativo:
No necesitas jQuery. Puedes escribir esto en forma nativa de JS,
var dimension = 720; var image = document.querySelector('.post-thumb'); if (image) { image.setAttribute('src', image.getAttribute('src').replace('s72', 's' + dimension)) console.log(image.getAttribute('src')); } Si desea que el código se ejecute en la carga de la página, use los eventos onload o domcontentloaded .