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

Avoid breaking string when creating new element due to text value

本文关键字：文本 字符串 于文本 创建 新元素 元素      更新时间：2023-09-26

在我的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++;
                });
            }
  });

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

在可变内容中，我放置了故事的文本。但顺便说一句，如果文本中包含双引号，那么字符串就会在这一点上断开。我能用javascript（甚至是纯javascript）来解决这个问题吗？

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

使用字符串替换，例如：

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

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

使用javascript函数将"替换为"

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

您应该明确地使用一些模板引擎。即使是简单的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>

当然，它有点复杂。但是您的代码变得更加可维护和干净。

相关文章：