Si tengo una plantilla HTML como:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://example.com/mystyle.css"> <title>Document</title> </head> <body> <a href="/images/1.png">link text</a> <a href="/images/3.png">link text</a> <a class="link" href="/images/4.png">link</a> <img src="/img_4.jpg" /> </body> </html> ¿Cómo aislaría y reemplazaría todas las etiquetas <a> hrefs de modo que https://example.com anteponga las URL relativas pero no las URL absolutas, por ejemplo, me gustaría obtener el siguiente resultado:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://example.com/mystyle.css"> ***leave untouched absolute url not relative** <title>Document</title> </head> <body> <a href="https://example.com/images/1.png">link text</a> **change** <a href="https://example.com/images/3.png">link text</a> **change** <a class="link" href="https://example.com/images/4.png">link</a> **change** <img src="/img_4.jpg" /> ***leave untouched src not href** </body> </html>Tengo un dilema en el que estoy explorando ideas para anteponer una URL de CDN a ciertas rutas de archivos en un sitio web HTML, CSS, JS estático con miles de archivos, pero no puedo usar htaccess (servidor LAMP) o base href (debido a la navegación ). Agregar enlaces manualmente tampoco es un corredor dada la escala. Razón por la que no puedo usar htaccess: Redirección de URL selectiva usando .htaccess El CMS que genera el sitio web estático tampoco tiene la capacidad de anteponer la URL de CDN en las rutas de archivo.
Cualquier recomendación muy apreciada. Gracias
Como ya se propuso en los comentarios, podría usar sed para ese trabajo en combinación con find .
Ejemplo de bash:
for file in `find . -name *.html`; do sed -E 's/href="\.?(\/[^"]*)"/href="https:\/\/example.com\1"/g' $file; done Al agregar la opción -i al comando sed , los archivos se modificarán en el lugar. Utilice el comando anterior sin la opción -i para fines de prueba.
Aporte:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://example.com/mystyle.css"> <title>Document</title> </head> <body> <a href="/images/1.png">link text</a> <a href="/images/3.png">link text</a> <a class="link" href="./images/4.png">link</a> <img src="/img_4.jpg" /> </body> </html>Producción:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://example.com/mystyle.css"> <title>Document</title> </head> <body> <a href="https://example.com/images/1.png">link text</a> <a href="https://example.com/images/3.png">link text</a> <a class="link" href="https://example.com/images/4.png">link</a> <img src="/img_4.jpg" /> </body> </html>En mi opinión, la solución más sencilla sería crear una variable $baseUrl.
En PHP:
$baseUrl = 'https://example.com';Luego en HTML puedes hacer:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://example.com/mystyle.css"> <title>Document</title> </head> <body> <a href="<?php echo $baseUrl; ?>/images/1.png">link text</a> <a href="<?php echo $baseUrl; ?>/images/3.png">link text</a> <a class="link" href="<?php echo $baseUrl; ?>/images/4.png">link</a> <img src="/img_4.jpg" /> </body> </html>O en JavaScript podrías hacer lo siguiente:
var links = document.getElementsByTagName("a"); Array.from(links).forEach( function(element, index) { var href = 'base_url' + element.getAttribute("href") element.setAttribute('href', href); } );