JavaScript - Extract Command Line Flags
Jump to navigation
Jump to search
About
NOTE: This page is a daughter page of: JavaScript
This is a simple "Extract Command Line Flags" webpage I created where you paste "--help" or "man page" output on the lert and it isolates the list of command line flags on the left.
... otherwise read on and I'll show you the source code which you can modify to make your own.
Extract Command Line Flags
Instructions: create the following three files, as named, in the same directory, then execute the HTML file.
extract_command_line_flags.html
<!DOCTYPE html>
<html>
<head>
<title>Extractor Command Line Flags v1.0</title>
<link rel="stylesheet" type="text/css" href="extract_command_line_flags.css" />
<script src="extract_command_line_flags.js"></script>
</head>
<body>
<div id="header_options">
<b>Options</b> .... (<a target="NoskeNotes" href="https://sites.google.com/a/google.com/noskenotes/code/google-sites/google-sites-html-cleaner">about</a>)
</div>
<div id="options_area">
Remove regex matches:
<div id="small_text_area">
<textarea id="txt-remove-regex" onchange="updateCode()">
#regex_here#
</textarea>
</div>
<br>
<input type="checkbox" id="chk-remove-empty-lines" name="chk-remove-empty-lines" onchange="updateCode()" checked>Remove empty lines<br>
<input type="checkbox" id="chk-remove-equal-signs" name="chk-remove-equal-signs" onchange="updateCode()" checked>Remove = signs<br>
<input type="checkbox" id="chk-sort-args" name="chk-sort-args" onchange="updateCode()" checked>Sort final args (a -> z)<br>
<input type="button" onclick="updateCode()" value="Update!">
<br>
<hr>
</div>
<div id="code_area">
<div id="header_before">
<b>Before</b> (paste code here)
</div>
<div id="code_area_before">
<textarea id="txt-before" onchange="updateCode()">
... paste text here...
-example_arg=true
-another_one Here is
another arg
</textarea>
</div>
<div id="header_after">
<b>After</b> (copy from here)
</div>
<div id="code_area_after" readonly>
<textarea id="txt-after">
...
</textarea>
</div>
</div>
</body>
</html>
extract_command_line_flags.js
/**
* Inputs a long 'haystack_str' string and does a find and replace
* all 'from_str' to 'to_str' with no regex.
* @param {!string} haystack_str The text to 'search'.
* @param {!string} from_str The text to 'find'.
* @param {!string} to_str The text to 'replace with'.
* @return {string} Returns the 'haystack' string after substitutions.
*/
function replaceAll(haystack_str, from_str, to_str) {
return haystack_str.split(from_str).join(to_str);
// NOTE: I haven't used "string.replace" because it only replaces the
// first occurance and the regex version looks for regex characters.
}
/**
* Gets the vales from a series of textarea boxes and checkboxes
* and performs a series of replace operations. The final result:
* the string in the textarea with id 'txt-before' gets replaced
* and the modified version output to 'txt-after'.
*/
function updateCode() {
// Get all boolean values from checkboxes:
var sortArgs = document.getElementById("chk-sort-args").checked;
var removeEmptyLines = document.getElementById("chk-remove-empty-lines").checked;
var removeEqualSigns = document.getElementById("chk-remove-equal-signs").checked;
// Get all string values from textareas:
var beforeText = document.getElementById("txt-before").value;
var regexText = document.getElementById("txt-remove-regex").value;
var text = beforeText; // Will become new HTML string.
// Kill special chars:
if (removeEqualSigns) {
text = replaceAll(text, "=", "#");
}
text = replaceAll(text, " ", "#");
text = replaceAll(text, "\t", "#");
text = replaceAll(text, ":", "#");
text = replaceAll(text, "##", "#");
text = replaceAll(text, "##", "#");
text = replaceAll(text, "##", "#");
text = replaceAll(text, "##", "#");
// Remove any line not starting with '-':
var lines = text.split("\n");
text = "";
for (var i = 0; i < lines.length; i++) {
if (lines[i].length < 2 || !lines[i].startsWith("#-")) {
lines[i] = "";
} else {
lines[i] += "#";
endIdx = lines[i].indexOf("#", 3);
lines[i] = lines[i].substring(1, endIdx);
}
}
// Remove empty lines.
if (removeEmptyLines) {
for (var i = lines.length - 1; i >= 0; i--) {
if (lines[i] == "") {
lines.splice(i, 1);
}
}
}
// Sort lines alphabetically:
if (sortArgs) {
lines = lines.sort()
}
// Put back into text:
text = "";
for (var i = 0; i < lines.length; i++) {
text += lines[i] + "\n";
}
// Process array of regex values to remove:
var regexLine = regexText.split("\n");
for (var i = 0; i < regexLine.length; i++) {
if (regexLine[i].length < 2)
continue;
var regex = new RegExp(regexLine[i], "g"); // "g" replaces all occurances.
text = text.replace(regex, "");
}
document.getElementById("txt-after").value = text;
}
extract_command_line_flags.css
/* To make a textarea fill up the whole page or the div it is in we must
* default to full width (or 98% for almost full width) and use absolute
* top and bottom to 0 and 0.
*/
textarea { position:absolute; top:0; left:0; width:98%; bottom:0; font-size: 90%;
resize: none; } /* The resize none blocks Chrome's resize widget */
/* If we put a textarea in a div tag with an id mapped to another CSS rule
* then we can make it fill up to that size. In this exmaple 'code_area_before'
* and 'code_area_after' take up about half the screen each.
*/
#header_options { position:absolute; top:0px; left:0%; right:50%; bottom:20px }
#options_area { position:absolute; top:20px; left:0px; width:290px; bottom:0 }
#small_text_area { position:relative; width:100%; top:0px; height:150px; }
#medium_text_area { position:relative; width:100%; top:0px; height:300px; }
#code_area { position:absolute; top:0px; left:300px; right:0; bottom:0 }
#header_before { position:absolute; top:0px; left:0%; right:50%; bottom:20px }
#code_area_before { position:absolute; top:20px; left:0; right:50%; bottom:0 }
#header_after { position:absolute; top:0px; left:50%; right:0; bottom:20px }
#code_area_after { position:absolute; top:20px; left:50%; right:0; bottom:0 }
Links
- Google Sites - a fantastic wiki by Google, although - like I said - it does a pretty bad job with the underlying HTML!
- DirtyMarkup.com - a brilliant tool which formats the HTML you paste in, and shows any errors / unmatching tags.
