noin
v0.0.5
Published
Takes inline scripts and puts them into a separate file
Readme
Noin
Command line utility that moves all the inline scripts in an .html file and put them into their own .js files. It then replaces the inline scripts with script tags linking to the newly created .js files. It also goes through and removes all inline event listeners and moves them into their own file.
Installation
To install, just run:
npm install -g noinUsage
To use noin on an individual file simply run:
noin index.htmlTo use noin on an entire folder add the -r flag:
noin -r directoryTo have noin backup the files it processes use add the -b flag:
noin -b index.htmlExample
Noin will take in an HTML file:
index.html
<html>
<head>
<script>
console.log('This inline script is in the header');
</script>
</head>
<body>
<p onClick="console.log('This is an inline event');">p Element</p>
<div onClick='console.log("Different quotation marks");'>div Element</div>
<div onClick="alert('This div has already has an ID');" id="named">Another div ELement</div>
<p onclick="alert('Testing lowercase onclick');">Another p Element</p>
<script>
console.log("This inline script is in the footer");
</script>
</body>
</html>It backs up the file (index.html.old), then it generates individual .js files for each inline script and inline event listener
index_script0.js
console.log('This inline script is in the header');index_script1.js
console.log('This inline script is in the footer');index_events.js
var listener_0 = document.getElementById("listener_0");
listener_0.addEventListener("click", function() {console.log('This is an inline event');}, false);
var listener_1 = document.getElementById("listener_1");
listener_1.addEventListener("click", function() {console.log("Different quotation marks");}, false);
var named = document.getElementById("named");
named.addEventListener("click", function() {alert('This div has already has an ID');}, false);
var listener_2 = document.getElementById("listener_2");
listener_2.addEventListener("click", function() {alert('Testing lowercase onclick');}, false);And rips out all the inline script and inline events and links them properly to the .js file (it will add id's to elements that have inline events but no id).
index.html
<html>
<head>
<script src="index_script0.js"></script>
</head>
<body>
<p id="listener_0">p Element</p>
<div id="listener_1">div Element</div>
<div id="named">Another div ELement</div>
<p id="listener_2">Another p Element</p>
<script src="index_script1.js"></script>
<script src="index_events.js"></script>
</body>
</html>Notice
Put together for csp testing purposes. It's pretty simple code, but was thrown together quickly and not thourougly tested. Use at your own risk.