Question

在我的网络应用程序中，我创建了一个表单，允许用户将故事插入在线报纸。为了做到这一点，我创建了一个隐藏的表格，我克隆它以允许用户创建新的故事，我稍后会抓住我的表单的提交事件。

在这里，我面临着关于故事内容的问题。例如，如果故事中包含双引号，则在提交事件上创建新元素时会破坏我的字符串，如此;

$("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++;
                });
            }
  });

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

在变量内容中，我放置了故事的文本。但顺便说一下，如果文本包含双引号，那么该字符串将在该点被破坏。有什么我可以用javascript（甚至是纯粹的javascript）来解决这个问题吗？

Answer 1

是 - 执行var content = '<input name="Cover[' + index + '].content" id="Cover[' + index + '].content" type="text" value="' + cNew.content.replace(/"/g, """) + '" style="display:none;" />';

Answer 2

使用字符串替换，例如：

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

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

Answer 3

使用javascript函数替换“with”

var content = content.replace(/"/g, "&quot");

Answer 4

你应该定义一些模板引擎。即使是简单的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>

当然，它有点复杂。但是你的代码变得更易于维护和清理。

由于文本值，在创建新元素时避免断开字符串

4 个答案: