javascript - 插入逗号时分割字符串并将其添加到字符串数组中

Question

我有一个输入，当用户键入逗号时，它会将字符串转换为“样式标签”，然后，当提交表单时，字符串将被插入名为“内容”的数组中。

在 EJS View 上，我打印的结果如 <%= course.content %>但我得到的结果是 'string1,string2,string3,string4'我所追求的是，​​当被插入数组时，每个字符串必须是不同的元素:

content ['string1','string2','string3','string4']

只有这样，它才会通过循环数组在我的 View 中正确呈现。我想仅通过 javaScript 或 jQuery 来实现此目的。

更新:这就是我在 View 中渲染的方式

<ul>
   <% var i; for (i = 0; i < course.content.length; i++) { %>
     <li><i class="fas fa-check"></i> <%= course.content %></li>
   <% }; %>
</ul>

更新:这是我执行此 POST 请求的路线

router.post("/", middleware.isLoggedIn, function(req, res) {
  Course.create(req.body.course, function(err, course) {
     if (err) {
       req.flash("error", err.message);
       return res.redirect("back");
     }
       res.redirect("/courses/" + course.id);
  });
});

解决了!通过在服务器端使用 split，如下所示:

router.post("/", middleware.isLoggedIn, function(req, res) {
   Course.create(req.body.course, function(err, course) {
     if (err) {
       req.flash("error", err.message);
       return res.redirect("back");
     } else {
       var content = req.body.course.content.toString().split(",");
       course.content = content;
       course.save();
       console.log(course.content);
       res.redirect("/courses/" + course.id);
     }
   });
});

这是使用 @garry man 的 function beforesubmit() 的 JavaScript 中的另一个解决方案，请参见下文。

codepen

Answer 1

漫漫长路

否则，有一种解决方法是您输入尽可能多的标签，就应该生成尽可能多的输入元素。

例如我的输入标签是 foo,bar 然后将生成 2 个输入标签，如

                                                            Note square brackets below
<input id="hiddenInput" type="hidden" name="course[content][]" required>
<input id="hiddenInput" type="hidden" name="course[content][]" required>

路还很长。

另一种方式

如果您通过 AJAX 提交表单，那么您可以在提交之前操作数据，并使用 .split(',') 将字符串转换为数组。

另一种方式(服务器端)

在服务器端按 , 分割字符串。