构建，修改，输出Javascript数组

Build, Modify, Output Javascript Array

本文关键字：数组 Javascript 修改 构建 输出      更新时间：2023-09-26

我想完成以下任务…如果它在一个问题中要求太多，那么一些简单的步骤来说明使用什么事件仍然会有所帮助。

有两个空白文本区坐在彼此旁边-输入和输出。它们之间有两个输入Before和After。我想在输入中键入或粘贴一个以换行符分隔的单词列表，例如:

melons
peaches
apples

然后使用Before和After输入，在每个关键字的前后分别添加一个单词/短语/符号。因此，如果我在之前输入"buy"，在之后输入"today"，输出文本区域将显示:

buy melons today
buy peaches today
buy apples today

我希望在没有任何页面刷新的情况下完成此操作。我们可以假设表单元素的命名方式如下:

<textarea id="input"></textarea>
<input type="text" id="before" />
<input type="text" id="after" />
<textarea id="output"></textarea>

我一直在尝试至少让输入文本显示在输出使用此代码，但这甚至不工作:

    $(document).ready(function(){
        $('#input').keyup(function(e){
            $('#output').html($(this).val());
        });
    });

任何指导将是了不起的!

一个紧凑的:

$("#input,#before,#after").on("keyup", function () {
    $("#output").val(
    $.map($("#input").val().split("'n"), function (n, i) {
        return $("#before").val() + " "+ n + " " + $("#after").val();
    }).join("'n"));
});
示例

可以这样做:

function update_output(){
    //Split input by newline
    var input_words = $('#input').val().split(''n');
    var output_lines = new Array();
    //Iterate over each keyword and prepend and append values
    $.each(input_words, function(i, word){
        output_lines.push($('#before').val()+' '+word+' '+$('#after').val());
    });
    //Display output in textarea
    $('#output').val(output_lines.join(''n'));
}

你只需要选择何时更新输出文本区域，也许绑定它，以便每次#input或#before和#after更改时更新:

$('#input,#before,#after').on('change',update_output);

好的，我可以帮你开始。我的答案不完整，但你可以从中得到一个很好的想法。请注意，我编写这段代码是为了便于理解，我并没有故意使用复杂的方法。

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$( document ).ready(function() {
    $("#input").keypress(function(key){
        if(key.which == 13) {
            refreshData();
        }
    });
});
function refreshData() {
    var beforeVal = $("#before").val();
    var inputLines = $("#input").val().split(/'r'n|'r|'n/g);
    var desiredOutputVal = "";
    for(var i=0; i<inputLines.length; i++) {
        desiredOutputVal += beforeVal + inputLines[i] + "'n";
    }
    $("#output").val(desiredOutputVal); 
}
</script>
</head>
<body>
<form>
    <textarea id="input"></textarea>
    <input type="text" id="before" />
    <input type="text" id="after" />
    <textarea id="output"></textarea>
</form>
</body></html>
相关文章：