I'm trying to figure out if there is a way (using JavaScript, or jQuery) to go through an entire HTML file replacing all references to external files and replace all the references to files in other directories with the same named file, but without directory information.
For instance, in the HTML text:
scripts/script.js gets replaced with script.jsimages/big.jpg gets replaced with big.jpgcss/style.css gets replaced with style.cssetc.
I guess the references in the CSS files need changing too.
The code below is very messy, it would be neat, but I hope you resolve what you need.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script language="JavaScript">
$(function(){
$("*", $("#container")).each(function()
{
try
{
//src
if ($(this).attr("src"))
if ($(this).attr("src").lastIndexOf("/")!=-1)
$(this).attr("src", $(this).attr("src").substr($(this).attr("src").lastIndexOf("/")+1) );
//href
if ($(this).attr("href"))
if ($(this).attr("rel"))
if ($(this).attr("rel")=="stylesheet")
if ($(this).attr("href").lastIndexOf("/")!=-1)
$(this).attr("href", $(this).attr("href").substr($(this).attr("href").lastIndexOf("/")+1) );
}
catch(ex)
{
$("#lstError").append("<div>"+ex.description+"</div>");
}
});
});
</script>
</head>
<body>
<div id="lstError"></div>
<div id="container">
<!-- your html -->
<link rel="stylesheet" href="pepe/all.css">
<img src="lele/bl.png" />
<img src="lele/b.png" />
</div>
</body>
</html>