Config Parser

config-parser.markdown

Config Parser

A Pen by Matt Morgan on CodePen.

License.

index.html

<div class="instructions">
  Instructions:
  <ul>
    <li>paste your config string into the "Connection String" box.</li>
    <li>Table values update on "Connection String" changes and "New Connection String" updates on table changes.</li>
    <li>"New Connection" text color is yellow when matching "Connection String" other wise it's blue</li>
    <li>Make your changes and copy paste the "New Connection String" value</li>
  </ul>
</div>
<div>
  <h1>Connection String</h1>
  <textarea cols=100 rows=5>

  </textarea>
</div>

<div>
  <table>
    <!-- script -->
  </table>
</div>

<div>
  <h1 id="nch1">New Connection String</h1>
  <textarea id="newcon" cols=100 rows=5 readOnly="true">

  </textarea>
</div>

script.js

function parseInput(inputText) {
  const re = /"?([^;=]*)=("[^"]*"|[^";]*);?"?/g;
  const found = inputText.matchAll(re);
  let kv = {};
  for (const match of found) {
    kv[match[1]] = match[2];
  }
  return kv;
}

function addRow(table, keyCellText, valueCellText) {
  const newRow = table.insertRow();
  const keyCell = newRow.insertCell(0);
  const valueCell = newRow.insertCell(1);
  const keyText = document.createTextNode(keyCellText);
  keyCell.appendChild(keyText);
  if (valueCellText.includes(";")) {
    const subTable = document.createElement("table");
    generateTable(subTable, parseInput(valueCellText));
    valueCell.appendChild(subTable);
  } else {
    const valueInput = document.createElement("input");
    valueInput.type = "text";
    valueInput.value = valueCellText;
    valueInput.addEventListener(
      "input",
      () =>
        (newTextArea.value = connectionStringFromTable(
          document.querySelector("table")
        ))
    );

    valueCell.appendChild(valueInput);
  }
}

function generateTable(table, pairs) {
  while (table.rows.length > 0) {
    table.deleteRow(0);
  }

  for (const [key, value] of Object.entries(pairs)) {
    addRow(table, key, value);
  }
}

function connectionStringFromTable(table) {
  let joinedString = "";
  for (const row of table.rows) {
    joinedString += row.cells[0].textContent;
    if (row.cells[1].firstChild.tagName === "TABLE") {
      joinedString += `="${connectionStringFromTable(
        row.cells[1].firstChild
      )}";`;
    } else {
      joinedString += `=${row.cells[1].firstChild.value};`;
    }
  }
  const newText = joinedString.slice(0, -1);
  newText === textArea.value
    ? (document.getElementById("nch1").style.color = "yellow")
    : (document.getElementById("nch1").style.color = "blue");
  return newText;
}

const testInput =
  'LargeMessageMaxMessageSize=196608;LargeMessageConnectionString="DefaultEndpointsProtocol=https;AccountName=rgdddd01songintegrat;AccountKey=f08a94bfb0bdc1d7f1cb59badaf0f8c551b10db871185622dbf1fd036affa9cb==;EndpointSuffix=core.windows.net";LargeMessageContainerName=songdocupload;LargeMessageStorageType=Azure;EnableEncryption=false;ServiceBusType=ASB;ServiceBusQueueName=QUEUE-NAME;QueueNameWithUri="AzureServiceBusMessaging://QUEUE-NAME/";ReceiveMode=ReceiveAndDelete;ServiceBusConnectionstring="Endpoint=sb://sandbox1.servicebus.windows.net/;SharedAccessKeyName=RootManageSharedAccessKey;SharedAccessKey=db69e9c190137919d83939b616c5e41b0f0b1363987fffc16bfe22623acf5aa1="';

const table = document.querySelector("table");
const textArea = document.querySelector("textarea");
const newTextArea = document.getElementById("newcon");
textArea.value = testInput;
const parsedInput = parseInput(testInput);
generateTable(table, parsedInput);
textArea.addEventListener("input", (e) =>
  generateTable(table, parseInput(e.target.value))
);
newTextArea.value = connectionStringFromTable(table);

style.css

h1 {
  color: yellow;
}

body {
  font-family: system-ui;
  background: rgb(136, 22, 53);
  color: white;
  text-align: center;
}

.instructions {
  text-align: left;
}

table,
th,
td {
  border: 1px solid black;
  padding: 3px;
}

input {
  width: 1000px;
}