由於文本值而在創建新元素時避免破壞字符串

Question

在我的Web應用程序中，我創建了一個表單，允許用戶將故事插入到在線報紙中。 爲了做到這一點，我創建了一個隱藏表，我克隆它以允許用戶創建新的故事，這些故事我後來在我的表單的提交事件上發現。

在這裏，我面臨着一個關於故事文本內容的問題。例如，如果故事中包含雙引號，則會在提交事件中創建新元素時破壞我的字符串，如此;

$("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, "&quot;") + '" style="display:none;" />';

Answer 2

使用字符串替換，例如：

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

另一個和更清潔的方法是將整個表複製與cloneNode在新表UND刪除值。

Answer 3

使用JavaScript函數來代替「與"

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

Answer 4

你應該definetely使用一些模板引擎。即使是簡單的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> 

當然，它更復雜一點。但是你的代碼變得更加可維護和乾淨。