时间戳

首页 > 解决方案 > 寻找一种方法来分解具有多个 \n 的字符串并将其转换为 innerHTML

javascript - 寻找一种方法来分解具有多个 \n 的字符串并将其转换为 innerHTML

问题描述

从昨天开始我一直在编写 JavaScript，并且是全新的。

我有一个字符串，我正在分解并变成表格的输入。条目由 '\n' 分隔，如 'a\nb'，表示在 a 和 b 之间需要一个新行。

我拥有的当前代码适用于 '\n' 的单个实例，但它在背靠背条目时停止工作，特别是“1.1\n2.1\n3.1\n4.1\n”。

它已与逗号分隔的其他示例一起使用，例如“a,b,c\n1,2,3”、“1.1,1.2,1.3,1.4,1.5\n”和“1.1,1.2,1.3,1.4 ,1.5\n2.1,2.2,2.3,2.4,2.5\n3.1,3.2,3.3,3.4,3.5\n4.1,4.2,4.3,4.4,4.5\n"。因为某些输入是逗号分隔的，所以它必须与这些输入以及由 '\n' 分隔的输入一起使用。

到目前为止，我的方法是将字符串拆分为一个数组，然后搜索数组的索引以查看它是否包含'\n'。如果是这样，我在“\n”处拆分数组，并用两个条目而不是一个条目拼接它。然后我设置了一个变量，指示我需要转到下一行，它移动到下面的 if else if。

var functionCreate = function (strInput) {

            var array = strInput.split(",");

            var html = "<table border=1><tr>";

            for (var i = 0; i < array.length; i++) {
                var newL = false;
                if (array[i].indexOf("\n") >= 0) {
                    newL = true;
                    newStr = array[i].split("\n");
                    array.splice(i, 1, newStr[0]);
                    array.splice(i + 1, 0, newStr[1]);
                }
                if (newL === true) {
                    html += "<td>" + array[i] + "</td></tr>";
                }
                else if (array[i]) {
                    html += "<td>" + array[i] + "</td>"
                }
            }

            html += "</table>"
            document.getElementById('output').innerHTML = html;

我目前输出的是：

output: "<table border=\"1\"><tbody><tr><td>1.1</td></tr><tr><td>2.1</td></tr></tbody></table>"

我的预期是：

"<table border=\"1\"><tbody><tr><td>1.1</td></tr><tr><td>2.1</td></tr><tr><td>3.1</td></tr><tr><td>4.1</td></tr></tbody></table>"

3.1 和 4.1 正在被切断，这是可以理解的，因为我相信 2.1 后面的所有内容都在 newStr 的 i + 1 中。

有谁知道如何克服这个问题？有没有办法只在第一个 '\n' 处拆分它并再次运行循环，直到没有更多的换行符？

标签： javascripthtml

解决方案

更改 var array = strInput.split(","); 为 var array = strInput.split("\n");

推荐阅读