时间戳

首页 > 解决方案 > 如何从变量中插入文本区域排序数据？

javascript - 如何从变量中插入文本区域排序数据？

问题描述

HTML：

<button id="myButton">Button</button>
<br />
<textarea id="imgLinks" rows="10" cols="30"></textarea>

JS：

$(document).ready(function() {
    $("#myButton").click(function() {
        var finalLink = '["img/1.jpg","img/sg.png","img/dfsg.jpg","img/484dg.jpg"]'
        $('#imgLinks').focus();
        $('#imgLinks').val($('#imgLinks').val() + finalLink);
    });
});

如何在textarea中插入来自finalLink的数据，如下所示：

https://example.com/1.jpg
https://example.com/sg.png
https://example.com/dfsg.jpg
https://example.com/484dg.jpg

https://jsfiddle.net/Qartvela/qxo73mfa/1/

标签： javascriptjqueryarrays

解决方案

您可以使用 map 根据需要修改链接元素，并\n在将它们设置为textarea值之前加入它们：

$(document).ready(function(){
  $("#myButton").click(function(){
    var finalLink = '["img/1.jpg","img/sg.png","img/dfsg.jpg","img/484dg.jpg"]'
    $('#imgLinks').focus();
    finalLink = JSON.parse(finalLink).map(l => 'https://example.com/'+l).join('\n');
    $('#imgLinks').val(finalLink);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="myButton">Button</button>
<br />
<textarea id="imgLinks" rows="10" cols="30"></textarea>

推荐阅读