Skip to content

Commit 7b33420

Browse files
author
Owen Barnes
committed
first commit
0 parents  commit 7b33420

File tree

9 files changed

+164
-0
lines changed

9 files changed

+164
-0
lines changed

Diff for: ‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.DS_Store

Diff for: ‎README.md

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# HTML Asset Tag Injector
2+
3+
Injects asset tags (e.g. `<script>` and `<link>`) inside a given HTML document in the most optimal place.
4+
5+
Outputs original HTML with top tags (typically CSS) and bottom tags (typically JS) correctly inserted.
6+
7+
8+
## Example
9+
10+
```js
11+
var injector = require('html-tag-injector');
12+
13+
var input = fs.readFileSync('any.html', 'utf8');
14+
var output = injector(input, {
15+
top: '<link rel="stylesheet" type="text/css" href="my.css">'
16+
bottom: '<script type="text/javascript" src="/myscript.js">'
17+
});
18+
```
19+
20+
## Status
21+
22+
This module is a work in progress. It's possible we'll need to move to a real HTML parser
23+
(like `htmlparser2`) instead of simple string substation in the future.
24+
25+
Pull requests appreciated. Please be sure to create test cases (it's easy).
26+
27+
28+
## Tests
29+
30+
To run tests:
31+
32+
mocha
33+
34+
35+
## Licence
36+
37+
MIT

Diff for: ‎index.js

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
"use strict";
2+
3+
/*!
4+
* HTML Tag Injector
5+
* -----------------
6+
*
7+
* Identifies the optimal place for top tags (e.g. CSS) and
8+
* bottom tags (e.g. JS) to be injected into a HTML view.
9+
*
10+
* Copyright(c) 2013 Owen Barnes <[email protected]>
11+
* MIT Licensed
12+
*/
13+
14+
var topTag = '<head',
15+
bottomTag = '</html>';
16+
17+
module.exports = function(originalHTML, options) {
18+
options = options || {};
19+
20+
var topTags = options.top || "<TOP_TAGS/>";
21+
var bottomTags = options.bottom || "<BOTTOM_TAGS/>";
22+
23+
var outputHTML,
24+
lowecaseHTML = originalHTML.toLowerCase();
25+
26+
// Only process if critical tags are present
27+
if (lowecaseHTML.indexOf(topTag) >= 0 && lowecaseHTML.indexOf(bottomTag) >= 0) {
28+
29+
// Insert topTagName (typically CSS) just after the <head> tag
30+
var startOfTagIndex = lowecaseHTML.indexOf(topTag) + topTag.length;
31+
var endOfTagIndex = lowecaseHTML.substring(startOfTagIndex).indexOf('>');
32+
var topIndex = startOfTagIndex + endOfTagIndex + 1;
33+
34+
// Insert bottomTagName (typically JS) just after the closing </html> tag
35+
var bottomIndex = lowecaseHTML.lastIndexOf(bottomTag);
36+
37+
// Compose HTML output
38+
outputHTML = originalHTML.substring(0, topIndex) +
39+
topTags +
40+
originalHTML.substring(topIndex, bottomIndex) +
41+
bottomTags + "\n" +
42+
originalHTML.substring(bottomIndex, originalHTML.length);
43+
}
44+
45+
return outputHTML;
46+
47+
};

Diff for: ‎package.json

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "html-tag-injector",
3+
"description": "Injects CSS and JS asset tags into a HTML document",
4+
"version": "0.0.1",
5+
"author": "Owen Barnes <[email protected]>",
6+
"engines": {
7+
"node": ">= 0.8.0"
8+
},
9+
"dependencies": {
10+
},
11+
"devDependencies": {
12+
"mocha": "1.8.x",
13+
"should": "1.2.x"
14+
},
15+
"scripts": {
16+
"test": "mocha"
17+
}
18+
}

Diff for: ‎test/fixtures/1.in.html

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Welcome</title>
6+
</head>
7+
<body>
8+
<p>Hello world!</p>
9+
</body>
10+
</html>

Diff for: ‎test/fixtures/1.out.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head><TOP_TAGS/>
4+
<meta charset="utf-8">
5+
<title>Welcome</title>
6+
</head>
7+
<body>
8+
<p>Hello world!</p>
9+
</body>
10+
<BOTTOM_TAGS/>
11+
</html>

Diff for: ‎test/fixtures/2.in.html

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<HTML lang="en">
3+
<HEAD something="else">
4+
<META charset="utf-8">
5+
<TITLE>Welcome</TITLE>
6+
</HEAD>
7+
<BODY>
8+
<p>Hello world!</p>
9+
</BODY>
10+
</HTML>

Diff for: ‎test/fixtures/2.out.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<HTML lang="en">
3+
<HEAD something="else"><TOP_TAGS/>
4+
<META charset="utf-8">
5+
<TITLE>Welcome</TITLE>
6+
</HEAD>
7+
<BODY>
8+
<p>Hello world!</p>
9+
</BODY>
10+
<BOTTOM_TAGS/>
11+
</HTML>

Diff for: ‎test/main.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
var fs = require('fs');
2+
var should = require('should');
3+
var injector = require('../');
4+
5+
function fixture(filename){
6+
return fs.readFileSync(__dirname + '/fixtures/' + filename, 'utf8');
7+
}
8+
9+
describe('finding tags in HTML', function(){
10+
11+
it('should work with with lowercase tags (1.in.html)', function(){
12+
injector(fixture('1.in.html')).should.equal(fixture('1.out.html'));
13+
});
14+
15+
it('should work with with uppercase tags and HEAD attributes (2.in.html)', function(){
16+
injector(fixture('2.in.html')).should.equal(fixture('2.out.html'));
17+
});
18+
19+
});

0 commit comments

Comments
 (0)