Skip to content

Instantly share code, notes, and snippets.

@ppazos

ppazos/X12_pretty_print.html

Last active August 16, 2018 04:26
Show Gist options
  • Save ppazos/94a63ab18910ab0c0d23c9ff4ff7e5c2 to your computer and use it in GitHub Desktop.
Save ppazos/94a63ab18910ab0c0d23c9ff4ff7e5c2 to your computer and use it in GitHub Desktop.
Download ZIP
an X12 message beautifier
Raw
X12_pretty_print.html
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
$(function() {
$('textarea').on('change keyup paste', function(e) {
//console.log(e.target.value);
//console.log(this.value);
var dest = $('#pretty');
dest.text('');
var raw = this.value;
var segments = raw.split("~");
var segment_id;
var segment_rest;
segments.forEach(function(segment) {
segment = segment.trim();
segment_id = segment.substring(0, segment.indexOf('*'));
segment_rest = segment.substring(segment.indexOf('*'));
dest.append('<div '+ (segment_id=='HL' ? 'class="hl"' : '') +'><span class="segment_id">'+ segment_id +'</span><span>'+ segment_rest +'</span></div>');
});
});
});
</script>
<style>
body {
font-family: monospace;
font-size: 12px;
}
textarea {
}
#pretty {
margin: 1em 0;
}
.segment_id {
color: #B00020;
font-weight: bold;
}
.hl {
border-top: 1px solid #000;
margin: 1em 0 0 0;
}
.hl .segment_id {
color: #FF0266;
}
</style>
</head>
<body>
<h1>
X12 Messages Pretty Print
</h1>
<label>Paste your X12 on the text area</label>
<textarea cols="100" rows="10"></textarea>
<br/>
<div id="pretty">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment