JSFiddle - React, Tailwind, and code Playground

by David Marshall

HTML

<table>
    <tr>
        <td valign='top'>
            <textarea id='rowNum' rows=1 cols=1 readonly style="overflow:hidden;resize:none;border: none;" data=1>1</textarea>
        </td>
        <td valign='top'>
            <textarea id='baseText' rows=2 cols=35 style="resize:none"></textarea>
        </td>
    </tr>
</table>

CSS

span{
    color:red;
}

JavaScript

$('textarea').on('keyup',function(){
    var text=$(this).val();
    var numberOfLongLines = (text.match(/[a-zA-Z0-9 \'\"]{36,}/g));
    if(numberOfLongLines==null)
        numberOfLongLines=0;
    else{
        var extraLong=0;
        for(i=0;i<numberOfLongLines.length;i++){
            extraLong=Math.floor(numberOfLongLines[i].length/35);
            console.log('extraLong:'+extraLong);
        }
        extraLong=extraLong-1;
        numberOfLongLines=numberOfLongLines.length+extraLong;
    }
    var numberOfLineBreaks = (text.match(/\n/g));
    if(numberOfLineBreaks==null)
        numberOfLineBreaks=0;
    else
        numberOfLineBreaks=numberOfLineBreaks.length;
    numberOfLineBreaks=numberOfLineBreaks+numberOfLongLines;
    
    var numberOfChar=text.length-numberOfLineBreaks;
    //console.log(numberOfChar+' '+numberOfLineBreaks);
    var rowNum=parseInt($('#rowNum').attr('data'));
    if(numberOfLineBreaks+1!=rowNum){
        //console.log($('#rowNum').attr('data'));
        var cur=numberOfLineBreaks+1;
        //console.log(cur>rowNum);
        while(cur>rowNum){
//            console.log('should append');
            $('#rowNum').val($('#rowNum').val() +'\r\n'+ (rowNum+1));
            $('#rowNum').attr('rows',(rowNum+1));
            $('#baseText').attr('rows',(rowNum+2));
            if(rowNum>10)
                $('#rowNum').attr('cols',2);
                
            rowNum=rowNum+1;
        }
        while(cur<rowNum){
            $('#rowNum').val($('#rowNum').val().substring(0,$('#rowNum').val().length-1));
            rowNum=rowNum-1;
            if(rowNum<10)
                $('#rowNum').attr('cols',1);
            $('#rowNum').attr('rows',(rowNum));
            $('#baseText').attr('rows',(rowNum+1));
        }
        $('#rowNum').attr('data',rowNum);
    }
});