Replace all references to external files (images, CSS and JavaScript) with flat directory references?
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 s开发者_如何学JAVAame named file, but without directory information.
For instance, in the HTML text:
scripts/script.js
gets replaced withscript.js
images/big.jpg
gets replaced withbig.jpg
css/style.css
gets replaced withstyle.css
etc.
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>
What about your browser's Save Page as...?
精彩评论