I would like to create a list of all CSS or JS files used in my website.

HTML:

<link rel="stylesheet" type="text/css" href="/css/1.css" />
<link rel="stylesheet" type="text/css" href="/css/2.css" />
<script type="text/javascript" src="/js/1.js"></script>
<script type="text/javascript" src="/js/2.js"></script>

NEEDED RESULT:

1.css
2.css
1.js
2.js

What is the most efficient way to do that?

I would like to create a list of all CSS or JS files used in my website.

HTML:

<link rel="stylesheet" type="text/css" href="/css/1.css" />
<link rel="stylesheet" type="text/css" href="/css/2.css" />
<script type="text/javascript" src="/js/1.js"></script>
<script type="text/javascript" src="/js/2.js"></script>

NEEDED RESULT:

1.css
2.css
1.js
2.js

What is the most efficient way to do that?

• javascript
• jquery
• html

• 6 Have you tried anything? – j08691 Commented Aug 19, 2014 at 16:06
• Yes, I have tried...I just asked for a most efficient way, not for a plete code. So why should I waste space here with my unsuccessful attempts. – Koralek M. Commented Aug 19, 2014 at 16:20
• 1 @KoralekM. because then we can point out what you did wrong, so you can learn. This way, in the future you don't make the same mistakes... instead of just copying and pasting someone else's answer and you not understanding it. – entropic Commented Aug 19, 2014 at 16:21
• The question was found by my query "javascript list files in page", and the answer(s) worked for me. There's nothing wrong with the question asked IMO. In this fortuitous case, the fact that the poster didn't post their methods allowed me the benefit of the accepted answer. – Oliver Williams Commented Mar 11, 2016 at 19:07

2 Answers 2

To get the href or src attributes of the elements you have listed use can use jquery .attr.

Here is a fiddle to demonstrate:

http://jsfiddle/dgfzywwv/1/

console.log($('link').attr('href'));
console.log($('script').attr('src'));

use a loop or map or something to go through the available elements. then print the results using attr.

(press F12 and click console if using chrome to see results).

You can use CSS selectors to find elements by tag name and whether they have the attribute we want, then fetch the attribute value and extract the filename:

$('script[src], link[href]').each(function (i, e) {
    var item = ((e.nodeName == "LINK") ? $(this).attr('href') : $(this).attr('src'))
    console.log(item.split("/").pop())
})

jsFiddle example