js-split练习|多行文案交叉插入_js split 插入-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42105893/article/details/103639579

js-split|多行文案交叉插入

这个标题好抽象啊，其实就是小新人练习js中split函数的一个小案例。
这是一个小工具，使用场景举例：
有一段中文文案，翻译后形成右边这样的英文文案，现需要将中文对应英文一一拼在一起
在这里插入图片描述
字段很多的话，人工做起来很费劲，这时候就可以用这个工具

说明到此结束，下面是代码：

<html>
    <head>
        <title>多行文案交叉插入</title>
    </head>
    <body>
        <form>
            <samp>左边文案：（转行分隔）</samp>
            <textarea id="txt_left" rows="10" cols="100"></textarea>
            <br>

            <samp>右边文案：（转行分隔）</samp>
            <textarea id="txt_right" rows="10" cols="100"></textarea>
            <br>

            <samp>结果：</samp>
            <textarea id="txt_result" rows="10" cols="100"></textarea>
            <br><br><br>

            <input type="button" value="生成" onclick="insert()">
        </form>
    </body>
</html>

<script>
function insert(){
    //获取文案
    var leftStr = document.getElementById("txt_left").value;
    var rightStr = document.getElementById("txt_right").value;

    //分隔字段
    var leftArr = leftStr.split("\n");
    var rightArr = rightStr.split("\n");

console.log();
    //拼接
    var result = "";
    for(let i = 0 ;i<leftArr.length && i<rightArr.length ; i++){
        result = result + leftArr[i] + "\t" + rightArr[i] + "\n";
    }

    //写入结果
    document.getElementById("txt_result").value = result;
}
</script>