Replace all references to external files (images, CSS and JavaScript) with flat directory references?

Question

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.js
images/big.jpg gets replaced with big.jpg
css/style.css gets replaced with style.css

etc.

I guess the references in the CSS files need changing too.

because i want to save the html locally, and than be able to view the page properly without a connection. creating the same directory structure (especially if external files are on a different domain) is untenable, so I need to 'flatten' the directory structure. — cannyboy
– cannyboy, Commented Oct 21, 2009 at 20:54
I know that in least Firefox, you can do File -> Save Page As and then choose "Save as type: Web Page, complete" and Firefox will download all of the js/css/img files locally and update the HTML document for you. Otherwise, JavaScript is not the right way to do this. — Tinister
– Tinister, Commented Oct 21, 2009 at 21:24

Peter Mortensen · Accepted Answer · 2010-01-12 17:59:22Z

1

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>

edited Jan 12, 2010 at 17:59

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Oct 21, 2009 at 21:33

andres descalzo

15k14 gold badges66 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

andres descalzo Over a year ago

This is just one way to do what you need @cannyboy. insurance is not a good practice because it generates many 404 errors.

moxn · Accepted Answer · 2009-10-21 21:24:02Z

1

What about your browser's Save Page as...?

answered Oct 21, 2009 at 21:24

moxn

1,7981 gold badge15 silver badges35 bronze badges

Collectives™ on Stack Overflow

Replace all references to external files (images, CSS and JavaScript) with flat directory references?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related