Question

我目前正在制作文本组合器，您可以在其中选择用于分隔文本片段的连字符。问题是我希望每一行都分开。例如，如果这些是三个单独的列：

1111 22222 333333
aaaaa bbbbb cccccc

我希望它输出：

1111-22222-33333
aaaaa-bbbbb-ccccc

但是现在它会输出如下内容：

11111
  aaaaa-22222
  bbbbb-33333
  cccccc

这是因为它遍历每个文本区域而不是每一行。像第二段文字一样输出文字的最佳方法是什么？

$(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>

Answer 1

这应该做您想要的。它读取每个textarea，将它们拆分为一个行数组，然后将行值与组合器合并。我在代码中添加了更多注释。

（注意：我还在输入textareas上添加了一个类，因此它不会使用输出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>

Answer 2

目前尚不清楚您想做什么。但是，如果要循环所有行，可以执行此操作

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

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

但是似乎您也可以通过用破折号替换空格来达到所需的输出

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

Answer 3

我认为这就是您想要得到的：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>

如何遍历textarea中的每一行？

3 个答案: