patternjavascriptMinor

Tabulate text with JavaScript

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

withtextjavascripttabulate

Problem

Pretty printer in ABAP does not take care of all my aligning need, so I wrote a small JS script that tabulates/aligns with a custom string. It contains HTML, CSS and script in 1 file because this is a small tool.

Link : https://github.com/konijn/aligner

```

Aligner

textarea { width: 100% ; height: 200px ; font-family: monospace }
.emo { margin-top: 10px ; margin-bottom: 10px }

Aligner
Editor:

DATA : wa_ekpo TYPE ekpo.
DATA : wa_eket TYPE eket.
DATA : wa_decision TYPE zrms_performance_decision.
DATA : wa_receipt_item TYPE zrmt_rcpt_items.
DATA : wa_container TYPE zrmt_rcpt_hdrs_c.

Align at

Align
Output:

//Do the DOM querying once, the DOM elements are stable
var editor = document.getElementById( 'editor' ),
output = document.getElementById( 'output' ),
token = document.getElementById( 'token' ),
button = document.getElementById( 'button' );

//What happens when we click that button
button.addEventListener( 'click' , function( e )
{
var lines = editor.value.split('\n'),
columnSizes = {};
//Collect for each line the size of each column, keep the largest column size
lines.forEach( function( line )
{
var columns = line.split( token.value );
columns.forEach( function( column , index )
{
columnSizes[index] = Math.max( column.length , columnSizes[index] || 0 );
});
});

//Build up the new text with aligned columns
output.value = lines.map( function( line )
{
var columns = line.split( token.value );
return columns.map( function( column , index )
{
return column + spaces( columnSizes[index] - column.length );
}).join( token.value

Solution

I'm just commenting on your HTML/CSS.

I commented out some br tags, because they were not necessary

I splitted the HTML in three parts with div's

Slightly adjusted the CSS rules


    
        
        Aligner
        
          textarea {
            width: 100% ;
            height: 200px ;
            font-family: monospace;
          }
          .controls {
            margin-top: 10px;
            margin-bottom: 10px;
          }
        
    
    
      Aligner
      
        Editor:-->
        
  DATA : wa_ekpo TYPE ekpo.
  DATA : wa_eket TYPE eket.
  DATA : wa_decision TYPE zrms_performance_decision.
  DATA : wa_receipt_item TYPE zrmt_rcpt_items.
  DATA : wa_container TYPE zrmt_rcpt_hdrs_c.    
        -->
      
      
        Align at
        
        Align-->
      
      
        Output:-->
        -->
      
      
        // your script

Code Snippets

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Aligner</title>
        <style>
          textarea {
            width: 100% ;
            height: 200px ;
            font-family: monospace;
          }
          .controls {
            margin-top: 10px;
            margin-bottom: 10px;
          }
        </style>
    </head>
    <body>
      <h2>Aligner</h2>
      <div class="editor">
        <label>Editor:</label><!--<br>-->
        <textarea id="editor">
  DATA : wa_ekpo TYPE ekpo.
  DATA : wa_eket TYPE eket.
  DATA : wa_decision TYPE zrms_performance_decision.
  DATA : wa_receipt_item TYPE zrmt_rcpt_items.
  DATA : wa_container TYPE zrmt_rcpt_hdrs_c.    
        </textarea><!--<br>-->
      </div>
      <div class="controls">
        <label class="emo">Align at</label>
        <input type="text" id="token" class="emo" value="TYPE">
        <button type="button" id= "button">Align</button><!--<br>-->
      </div>
      <div class="output">
        <label>Output:</label><!--<br>-->
        <textarea id="output"></textarea><!--<br>-->
      </div>
      <script>
        // your script
      </script>
    </body>
</html>

Context

StackExchange Code Review Q#39234, answer score: 4

Revisions (0)

No revisions yet.