How to loop through every line in textarea?

Question

I am currently making a text combiner where you can choose a hypen that seperates the pieces of text. The problem with it is that I want every line to be separate. For example if these are three separate columns:

1111 22222 333333
aaaaa bbbbb cccccc

I want it to output this:

1111-22222-33333
aaaaa-bbbbb-ccccc

But right now it would output something like:

11111
aaaaa-22222
bbbbb-33333
cccccc

This is because it loops through every textarea instead of every line. What is the best way to output it like the 2nd block of text?

$(document).ready(function() {
    //add input field
    var field_count = 0;
    $('#add').click(function(){
        $('#get').show();
        $('#combine').show();
        field_count++;
        $('table tr.tables').append('<td><textarea cols="40" rows="15" name="tname' + field_count + '"></textarea></td>');
    });

    //connect results with hyphen
    $('#get').click(function(){
        $('#values').html('<textarea cols="40" rows="15">' + $('textarea').map(function(){
            return (this.value.length > 0) ? this.value : null;
        }).get().join($("input.combiner").val()));
    });
});

<head>
    <title>Column Combiner</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!--<script type="text/javascript" src="assets/js/global.js"></script>
    <link rel="stylesheet" href="assets/css/main.css">-->
</head>
<body>
    <table>
        <tr class="tables"></tr>
    </table>
    <form method="get">
        <input id="add" type="button" value="Voeg veld toe">
        <input class="combiner" id="combine" type="text" name="combiner">
        <input id="get" type="button" value="Combineer">
        <div id="values"></div>
    </form>
</body>

Im a little confused ith what ur trying to do, can you explain a little? — Yaakov5777, Mar 08 '19 at 08:34
i want to combine the text you put in the textareas. but it has to combine every line and put it in a list. right now it just combines the texareas with eachother — Codekonijn, Mar 08 '19 at 08:46

score 1 · Accepted Answer · answered Mar 08 '19 at 09:50

This should do what you want. It reads each textarea, splits them to an array of rows, then merges the row values with the combiner. I added some more comments in the code.

(note: I also added a class on the input textareas, so it won't use the value of the output textarea)

$(document).ready(function() {
    //add input field
    var field_count = 0;
    $('#add').click(function(){
        $('#get').show();
        $('#combine').show();
        field_count++;
        $('table tr.tables').append('<td><textarea class="inputfield" cols="40" rows="15" name="tname' + field_count + '"></textarea></td>');
    });
    
    var getCombinedValues = function() {
        var lines = [];
        
        // split each text field to an array of lines, add that array to the global one
        // [["111","aaa"],["222","bbb"],["333","ccc"]]
        $('.inputfield').each(function() {
           lines.push($(this).val().split('\n'));
        });
                
        // we now switch rows <-> colums since we want to join the same line in each textarea, rather than all lines per textarea, eg.
        // [["111","222","333"],["aaa","bbb","ccc"]]
        // (solution from https://stackoverflow.com/a/41772644/3178068)
        lines = lines.reduce((prev, next) => next.map((item, i) =>
          (prev[i] || []).concat(next[i])
        ), []);
                
        // combine each line with the combiner
        // ["111-222-333","aaa-bbb-ccc"]
        var combiner = $("input.combiner").val();
        lines = $.map(lines, function(e) {
           return e.join(combiner);
        });
        
        // combine all lines to a single string
        return lines.join("\n");
    };

    //connect results with hyphen
    $('#get').click(function(){
        $('#values').html('<textarea cols="40" rows="15">' + getCombinedValues() + '</textarea>');
    });
});

<head>
    <title>Column Combiner</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!--<script type="text/javascript" src="assets/js/global.js"></script>
    <link rel="stylesheet" href="assets/css/main.css">-->
</head>
<body>
    <table>
        <tr class="tables"></tr>
    </table>
    <form method="get">
        <input id="add" type="button" value="Voeg veld toe (Add input field)">
        <input class="combiner" id="combine" type="text" name="combiner">
        <input id="get" type="button" value="Combineer (Combine)">
        <div id="values"></div>
    </form>
</body>

score 0 · Answer 2 · answered Mar 08 '19 at 08:42

It is not very clear what you want to do. But if you want to loop all the rows you can do this

var rows = $('#tname').val().split(/\r?\n/);

for (var i = 0; i < rows.length; i++) {
    console.log(rows[i]);
}

But it seems your desired output can also be reached just by replacing spaces with a dash

$('#tname').val($('#tname').val().replace(/ /g, '-'));

Avanthika · Answer 3 · 2019-03-08T09:49:20.317

I think this is what you are trying to get: Value in each line of textarea.

function readvalues() {
 $('textarea').each((index, elem) => {
  var lines = $(elem).val().split('\n');
  for(var i = 0;i < lines.length;i++){
    console.log(`textarea-${index + 1}`, lines[i]);
  }
 });
}

$(document).ready(function() {
    //add input field
    var field_count = 0;
    $('#add').click(function(){
        $('#get').show();
        $('#combine').show();
        field_count++;
        $('table tr.tables').append('<td><textarea onchange="readvalues();" cols="40" rows="15" name="tname' + field_count + '"></textarea></td>');
    });

    //connect results with hyphen
    $('#get').click(function(){
        $('#values').html('<textarea cols="40" rows="15">' + $('textarea').map(function(){
            return (this.value.length > 0) ? this.value : null;
        }).get().join($("input.combiner").val()));
    });
});

<head>
    <title>Column Combiner</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!--<script type="text/javascript" src="assets/js/global.js"></script>
    <link rel="stylesheet" href="assets/css/main.css">-->
</head>
<body>
    <table>
        <tr class="tables"></tr>
    </table>
    <form method="get">
        <input id="add" type="button" value="Voeg veld toe">
        <input class="combiner" id="combine" type="text" name="combiner">
        <input id="get" type="button" value="Combineer">
        <div id="values"></div>
    </form>
</body>

this outputs as textarea--textarea--textarea again but i want it to ouput like textarea1line1-textarea2line1-textarea3line1, i hope this makes sense — Codekonijn, Mar 08 '19 at 08:54
@Codekonijn, I have edited my answer, the above code will get you, textarea1-line1, textarea2-line2 and henceforth. — Avanthika, Mar 08 '19 at 09:50

How to loop through every line in textarea?

3 Answers3