x12 Viewer

index.html

<textarea id="edi-input" placeholder="Paste edi in here...">
</textarea>
<br />
<input  id="search" placeholder="search segments and elements">
<table id="edi-table" border="1">
</table>

script.js

document.getElementById("edi-input").addEventListener("input", function() {
  renderEDI(this.value)
})

let foundElem = []
document.getElementById('search').addEventListener("input", function() {
  foundElem.forEach(elem => {
    elem.classList.remove("found")
  })
  
  foundElem = document.querySelectorAll(`.${this.value.toLowerCase()}`)
  foundElem.forEach(elem => {
    elem.classList.add("found")
  })
})

let ediTable = document.getElementById("edi-table")

function renderEDI(edi) {
  let html = edi.split("~").map((seg) => {
    let row = '<tr>'
    let elements = seg.split("*")
    let identifier = elements[0]
    row += elements.map((element, idx) => {
      if (idx == 0)
        return `<th class="${identifier.toLowerCase()}">${element}</th>`
      else
        return `<td title="${identifier}${leftpad(idx)}" class="${identifier.toLowerCase()} ${identifier.toLowerCase()}${leftpad(idx)}">${element}</td>`
    }).join('')
    row += '</tr>'
    return row
  }).join('')
  ediTable.innerHTML = html
}

function leftpad(num) {
  if (num < 10)
    return "0" + num
  
  return num
}

style.css

table {
  cursor: pointer;
}

td:hover {
  background: salmon;
}

.found {
  background: #967BB6;
}

.not-found {
  background-color: red;
}

x12-viewer.markdown

x12 Viewer

A Pen by George on CodePen.

License.