diff --git a/ReaderHTML.html b/ReaderHTML.html
new file mode 100644
index 0000000..aa9977a
--- /dev/null
+++ b/ReaderHTML.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+ Get Text Input Field Value in JavaScript
+
+
+
+
+
+
+
+
+
+
diff --git a/reader.js b/reader.js
new file mode 100644
index 0000000..97135ce
--- /dev/null
+++ b/reader.js
@@ -0,0 +1,186 @@
+//CKEDITOR.instances.myInput.on("change", function ()
+
+function test() {
+ var insideP = false;
+ var inside = false;
+ var insideC = false;
+ var parsedString = "";
+ var parenthesis = 0;
+
+ var textField = document.getElementById("myInput"); //get element by Id
+ let text = textField.value;
+
+ let charArray = Array.from(text); //Array from input
+
+ //Parenthesis - opening
+ charArray.map((c, index, row) => {
+ if (c == "(") {
+ if (parenthesis > 2) {
+ c = `${c}`;
+ }
+ if (parenthesis == 2) {
+ c = `${c}`;
+ }
+ if (parenthesis == 1) {
+ c = `${c}`;
+ }
+ if (parenthesis == 0) {
+ c = `${c}`;
+ }
+ parenthesis++;
+ insideP = true;
+ }
+
+ //Parenthesis - closing
+ if (c == ")") {
+ if (parenthesis > 3) {
+ c = `${c}`;
+ }
+ if (parenthesis == 3) {
+ c = `${c}`;
+ }
+ if (parenthesis == 2) {
+ c = `${c}`;
+ }
+ if (parenthesis <= 1) {
+ c = `${c}`;
+ }
+ insideP = false;
+ parenthesis--;
+ }
+
+ // ^
+ if (c == "^" && index == 0) {
+ c = `${c}`;
+ }
+
+ //^chars
+ if (c == "^" && index != 0) {
+ let chars = "";
+ chars += c;
+ if (charArray[index + 1] == "c") {
+ chars += charArray[index + 1];
+
+ if (charArray[index + 2] == "h") {
+ chars += charArray[index + 2];
+
+ if (charArray[index + 3] == "a") {
+ chars += charArray[index + 3];
+
+ if (charArray[index + 4] == "r") {
+ chars += charArray[index + 4];
+
+ if (charArray[index + 5] == "s") {
+ chars += charArray[index + 5];
+ }
+ }
+ }
+ }
+ for (let i = 0; i < 5; i++) {
+ charArray.shift();
+ c = `${chars}`;
+ }
+ } else {
+ c = `${chars}`;
+ }
+ }
+
+ //Quantifier
+ if (c == "+" || c == "-" || c == "*" || c == "?") {
+ c = `${c}`;
+ }
+
+ //Any
+ if (c == "." && charArray[index - 1] != "%") {
+ c = `${c}`;
+ }
+
+ //Capture
+ if (c == "[") {
+ inside = true;
+ c = `${c}`;
+ }
+
+ if (c == "]") {
+ inside = false;
+ c = `${c}`;
+ }
+
+ //Inside Capture
+ if (c == "%" && (inside || insideP)) {
+ scaped = false;
+ if (
+ charArray[index + 1] == "f" ||
+ charArray[index + 1] == "a" ||
+ charArray[index + 1] == "c" ||
+ charArray[index + 1] == "d" ||
+ charArray[index + 1] == "g" ||
+ charArray[index + 1] == "l" ||
+ charArray[index + 1] == "p" ||
+ charArray[index + 1] == "s" ||
+ charArray[index + 1] == "u" ||
+ charArray[index + 1] == "w" ||
+ charArray[index + 1] == "x" ||
+ charArray[index + 1] == "z" ||
+ charArray[index + 1] == "A"
+ ) {
+ c = `${c + charArray[index + 1]}`;
+ charArray.shift();
+ }
+ }
+
+ //%f
+ if (c == "%" && !inside) {
+ let chars = "";
+ chars += c;
+ if (charArray[index + 1] == "f") {
+ chars += charArray[index + 1];
+ charArray.shift();
+
+ c = `${chars}`;
+ }
+ }
+
+ //%1
+ if (c == "%" && charArray[index + 1] == "1") {
+ c = `${c + charArray[index + 1]}`;
+ charArray.shift();
+ }
+
+ //Balanced match
+ if (c == "%") {
+ let chars = "";
+ chars += c;
+ if (charArray[index + 1] == "b") {
+ chars += charArray[index + 1];
+ if (charArray[index + 2] == "{") {
+ chars += charArray[index + 2];
+ insideC = true;
+ }
+ charArray = charArray.splice(index, 2);
+ c = `${chars}`;
+ }
+ }
+
+ if (c == "}" && insideC) {
+ insideC = false;
+ c = `${c}`;
+ charArray.shift();
+ }
+
+ //End anchor
+ if (c == "$" && index + 1 == row.length) {
+ c = `${c}`;
+ }
+
+ //%Scaped Character - least priority
+
+ if (c == "%") {
+ c = `${c}`;
+ }
+
+ parsedString += c;
+
+ document.getElementById("mytest").innerHTML = parsedString;
+ });
+}
diff --git a/styles.css b/styles.css
index 154c546..0b9259a 100644
--- a/styles.css
+++ b/styles.css
@@ -155,3 +155,73 @@ body {
transition: margin-left 1s;
padding: 0px 10px;
}
+
+.mytest {
+ font-size: 30px;
+}
+
+.parenthesis0 {
+ background-color: rgba(0, 47, 255, 0.5);
+}
+.parenthesis1 {
+ background-color: rgba(173, 209, 230, 0.5);
+}
+
+.parenthesis2 {
+ background-color: rgba(131, 5, 131, 0.5);
+}
+
+.parenthesis3 {
+ background-color: rgba(255, 182, 194, 0.5);
+}
+
+.caret0 {
+ background-color: rgba(238, 255, 0, 0.87);
+}
+
+.caret1 {
+ background-color: rgba(243, 194, 60, 0.5);
+}
+
+.square0 {
+ background-color: rgba(213, 60, 243, 0.5);
+}
+
+.frontier0 {
+ background-color: rgba(243, 43, 8, 0.651);
+}
+
+.captureReference0 {
+ background-color: rgba(8, 243, 204, 0.651);
+}
+.chars0 {
+ background-color: rgba(243, 169, 8, 0.651);
+}
+
+.quantifier0 {
+ background-color: rgba(8, 118, 243, 0.582);
+}
+
+.any0 {
+ background-color: rgba(255, 0, 234, 0.774);
+}
+
+.capture0 {
+ background-color: rgba(0, 255, 21, 0.856);
+}
+
+.captureReference0 {
+ background-color: rgba(7, 255, 90, 0.548);
+}
+
+.balanced0 {
+ background-color: rgba(183, 0, 255, 0.733);
+}
+
+.end0 {
+ background-color: rgba(238, 255, 0, 0.87);
+}
+
+.scaped0 {
+ background-color: rgba(146, 146, 146, 0.904);
+}