Javascript 避免在创建新元素时由于文本值而中断字符串

在我的web应用程序中，我创建了一个表单，允许用户将故事插入在线报纸。 为了做到这一点，我创建了一个隐藏表，并对其进行了克隆，以允许用户创建新的故事，稍后我会在表单的提交事件中捕捉到这些故事

在这里，我面临着一个关于故事文本内容的问题。 例如，如果故事包含双引号，则在submit事件上创建新元素时，它会打断我的字符串，如下所示

$("form").submit(function () {

            var myForm = $(this);
            // begin cover stories process

            var stories = $("#newsBlock").find("table");

            if (stories != undefined) {
                stories.each(function (index) {
                    var cNew = new CoverNew($(this).find('[name="news_id"]').attr("value"), $(this).find('[name="editionDate"]').attr("value"), $(this).find('[name="newsTitle"]').attr("value"), $(this).find('[name="newsLink"]').attr("value"), $(this).find('[name="newsAuthor"]').attr("value"), $(this).find('[name="newsSource"]').attr("value"), $(this).find('[name="newsDescription"]').attr("value"), $(this).find('[name="newsImageListing"]').attr("value"), $(this).find('[name="newsImageStory"]').attr("value"), $(this).find('[name="newsImageStory_Author"]').attr("value"), $(this).find('[name="newsImageStory_Description"]').attr("value"), $(this).find('[name="newsVideo"]').attr("value"), $(this).find('[name="newsText"]').val(), $(this).find('[name="newsOrder"]').attr("value"));

                    var ids = '<input name="Cover[' + index + '].id" id="Cover[' + index + '].id" type="text" value ="' + cNew.id + '" style="display:none;" />';
                    var title = '<input name="Cover[' + index + '].title" id="Cover[' + index + '].title" type="text" value="' + cNew.title + '" style="display:none;" />';
                    var editionDate = '<input name="Cover[' + index + '].edition_date" id="Cover[' + index + '].edition_date" type="text" value="' + cNew.editionDate + '" style="display:none;" />';
                    var link = '<input name="Cover[' + index + '].link" id="Cover[' + index + '].link" type="text" value="' + cNew.link + '" style="display:none;" />';
                    var author = '<input name="Cover[' + index + '].author" id="Cover[' + index + '].author" type="text" value="' + cNew.author + '" style="display:none;" />';
                    var source = '<input name="Cover[' + index + '].source" id="Cover[' + index + '].source" type="text" value="' + cNew.source + '" style="display:none;" />';
                    var description = '<input name="Cover[' + index + '].description" id="Cover[' + index + '].description" type="text" value="' + cNew.description + '" style="display:none;" />';
                    var menuPicture = '<input name="Cover[' + index + '].photo_in_list" id="Cover[' + index + '].photo_in_list" type="text" value="' + cNew.menu_picture + '" style="display:none;" />';
                    var story_picture = '<input name="Cover[' + index + '].photo_in_news" id="Cover[' + index + '].photo_in_news" type="text" value="' + cNew.story_picture + '" style="display:none;" />';
                    var story_picture_description = '<input name="Cover[' + index + '].photo_in_news_desc" id="Cover[' + index + '].photo_in_news_desc" type="text" value="' + cNew.story_picture_description + '" style="display:none;" />';
                    var story_picture_author = '<input name="Cover[' + index + '].photo_in_news_author" id="Cover[' + index + '].photo_in_news_author" type="text" value="' + cNew.story_picture_author + '" style="display:none;" />';
                    var video = '<input name="Cover[' + index + '].video" id="Cover[' + index + '].video" type="text" value="' + cNew.video + '" style="display:none;" />';
                    var content = '<input name="Cover[' + index + '].content" id="Cover[' + index + '].content" type="text" value="' + cNew.content + '" style="display:none;" />';
                    var order = '<input name="Cover[' + index + '].order" id="Cover[' + index + '].order" type="text" value="' + cNew.order + '" style="display:none;" />';

                    myForm.append(ids);
                    myForm.append(title);
                    myForm.append(editionDate);
                    myForm.append(link);
                    myForm.append(author);
                    myForm.append(source);
                    myForm.append(description);
                    myForm.append(menuPicture);
                    myForm.append(story_picture);
                    myForm.append(story_picture_description);
                    myForm.append(story_picture_author);
                    myForm.append(video);
                    myForm.append(content);
                    myForm.append(order);

                    index++;
                });
            }
  });

$（“表单”）.submit（函数（）{
var myForm=$（这是）；
//开始封面故事流程
var stories=$（“#新闻块”）.find（“表”）；
如果（故事！=未定义）{
故事。每个（功能（索引）{
var cNew=new CoverNew（$（this）.find（'[name=“news_id”]）.attr（“value”），$（this.find（'[name=“editionDate”]）.attr（“value”），$（this.find（'[name=“newsttitle”]）.attr（“value”），$（this.find（'[name=“newsLink”））.attr（“value”），$（this.find（'[name=“newsAuthor”）））.attr（“value”），$（this.find（'[name=“newsSource”）））.attr（“value”），$（this.find”）=“newsDescription”]）.attr（“value”），$（this）.find（'[name=“newsImageListing”]）.attr（“value”），$（this.find（'[name=“newsImageStory”]）.attr（“value”），$（this.find（'[name=“newsImageStory”）.attr（“value”），$（this.find（'[name=“newsImageStory”））.attr（“value”），$（this.find（'[name=“newsImageStory”）））.attr（“value”），$（this.find”）newsText“]”）.val（），$（this.find（'[name=“neworder”]'）.attr（“value”）；
变量ID=“”；
var title=''；
var editionDate=''；
var-link=''；
var author=''；
var source=''；
变量描述=“”；
var menuPicture=''；
var story_picture=''；
var story\u picture\u description=''；
var story\u picture\u author=''；
var视频=“”；
var内容=“”；
var顺序=“”；
myForm.append（id）；
myForm.append（标题）；
myForm.append（编辑日期）；
myForm.append（link）；
myForm.append（作者）；
myForm.append（源代码）；
myForm.append（说明）；
myForm.append（menuPicture）；
myForm.append（故事\图片）；
附加（故事、图片、描述）；
附加（故事、图片、作者）；
myForm.append（视频）；
myForm.append（内容）；
myForm.append（订单）；
索引++；
});
}
});

在上面的过程中，我收集了用户克隆的包含故事的表

在可变内容中，我放置了故事的文本。 但是顺便说一句，如果文本包含双引号，字符串将在该点被打断。

---

我可以用javascript（甚至纯javascript）做些什么来解决这个问题吗？

是-使用字符串替换，例如：

cNew.story_picture_description.replace(/"/g, """);

---

另一种更简洁的方法是使用cloneNode复制整个表，并删除新表中的值。

使用javascript函数替换“with”

---

您应该明确地使用一些模板引擎。即使是简单的jquery模板或微模板也可以

// Template engine, yea that easy
function templ(str, data) {
    for (var p in data)
        str = str.replace(new RegExp('{'+p+'}','g'), data[p]);
    return str;
}

var cNew = new CoverNew(...);
cNew.index = index;
var story = templ($('#story-content').html(), cNew);
myForm.append(story);

并将所有html放入容器中：

<script type="text/template" id="story-content">
    <input name="Cover[{index}].id" id="Cover[{index}].id" type="text" value ="{id}" style="display:none;" />
    <input name="Cover[{index}].title" id="Cover[{index}].title" type="text" value="{title}" style="display:none;" />
    ...
</script>

...

---

当然有点复杂。但是您的代码变得更易于维护和干净。

replace（/“/g，”）对我来说很不错。所以您建议我以后在将结果发送到服务器后再次将“”替换为“返回”。因为我需要与最初完全相同的故事文本。您不需要。”将在页面上显示为“它在HTML中是等效的。与&；将在页面上显示&我知道会，但整个操作的目标是将这些克隆表的内容传输到asp.net mvc服务器代码进行处理。不管怎样，我明白了这个想法，我很惭愧我以前没有想到。每个人有时候都会忘记一些简单的事情：我想是的！谢谢你把我从这一个“拯救”出来，我有点急于交付最后的代码。希望其他人也能从这个问题中受益+好主意。我以前没听说过文本/模板。我一定会查的。你是对的，代码现在看起来更干净了。谢谢你的提醒。如果类型属性未知，所有浏览器都会忽略脚本标记的内容。它使

一些html

成为存储html内容的理想场所，这些内容在页面上是不可见的，但仍然可以通过id、innerHTML等使用。

<script type="text/template" id="story-content">
    <input name="Cover[{index}].id" id="Cover[{index}].id" type="text" value ="{id}" style="display:none;" />
    <input name="Cover[{index}].title" id="Cover[{index}].title" type="text" value="{title}" style="display:none;" />
    ...
</script>