Почему этот код JS дает мне синтаксическую ошибку?

Question

Я получаю эту ошибку:

Uncaught SyntaxError: Unexpected identifier

Это мой супер грязный код в моем файле update.js.erb, который дает мне ошибку:

$(".comments_div").html("<% @video.comment_titles.each do |comment_title| %> \
<div class ="comment_column_<%= 
 case @video.comment_titles.count 
    when 1 
        "wide" 
    when 2 
    "medium" 
    when 3 
        "narrow" 
    else 
        return 
    end 
%>"> \
    <% unless @video.comment_titles.count == 0 %> \
    <div id = "comment_title_<%= comment_title.id %>" class="comment_title"> \
        <%= comment_title.title %> \
        <%= link_to "x", comment_title_path(comment_title.id), :method => :delete, :remote => true, :class => 'comment_title_delete' %> \
    </div> \
        <% comment_title.comments.each do |comment| %> \
            <div class='comment_content'>  \
              <%= link_to image_tag(comment.user.profile.photo.url(:tiny)), profile_path(comment.user.profile), :class => "comment_image" %> \
              <div class='textual_comment_content'> \
              <div class='comment_text'> \
                 <span class="name_link"> \
                     <%= link_to "#{comment.user.name}", profile_path(comment.user.profile), :class => 'normal' %> \
                 </span> \
                 <%= comment.body %> \
              </div> \
              <span class='comment_footer'> \
                 <ul> \
                    <li class='list_style'><%= time_ago_in_words(comment.created_at) %> ago</li> \
                    <% unless current_user != comment.user %> \
                        <li><%= link_to "Delete", video_comment_path(:video_id => @video, :id => comment), :method => :delete, :class => 'normal' %></li> \
                    <% end %> \
                 </ul> \
              </span> \
              </div> \
            </div> \
        <% end %> \
     </div> \
    <% end %> \
<% end %>");

Это то, чтобраузер видит:

$(".comments_div").html(" \
<div class ="comment_column_medium"> \
     \
    <div id = "comment_title_39" class="comment_title"> \
        Do you like this song? \
        <a href="/comment_titles/39" class="comment_title_delete" data-method="delete" data-remote="true" rel="nofollow">x</a> \
    </div> \
         \
            <div class='comment_content'>  \
              <a href="/profiles/45" class="comment_image"><img alt="Justin meltzer" src="/system/photos/45/tiny/Justin Meltzer.jpeg?1302075215" /></a> \
              <div class='textual_comment_content'> \
              <div class='comment_text'> \
                 <span class="name_link"> \
                     <a href="/profiles/45" class="normal">Justin Meltzer</a> \
                 </span> \
                 Ok so this is what I think about this song: You need to switch back to your roots. You started as a rapper, and you need to remain a rapper. I respect you for your initiative to improve your flexibility but please stick to your roots. That's what makes you truly great. \
              </div> \
              <span class='comment_footer'> \
                 <ul> \
                    <li class='list_style'>about 17 hours ago</li> \
                     \
                        <li><a href="/videos/485/comments/22" class="normal" data-method="delete" rel="nofollow">Delete</a></li> \
                     \
                 </ul> \
              </span> \
              </div> \
            </div> \
         \
     </div> \
     \
 \
<div class ="comment_column_medium"> \
     \
    <div id = "comment_title_71" class="comment_title"> \
        ascasc sc \
        <a href="/comment_titles/71" class="comment_title_delete" data-method="delete" data-remote="true" rel="nofollow">x</a> \
    </div> \
         \
     </div> \
     \
");

ОБНОВЛЕН. КОД .JS.ERB:

$(".comments_div").html('<% @video.comment_titles.each do |comment_title| %> \
<div class ="comment_column_<%= 
 case @video.comment_titles.count 
    when 1 
        "wide" 
    when 2 
       "medium" 
    when 3 
        "narrow" 
    else 
        return 
    end 
%>"> \
    <% unless @video.comment_titles.count == 0 %> \
    <div id = "comment_title_<%= comment_title.id %>" class="comment_title"> \
        <%= comment_title.title %> \
        <%= link_to "x", comment_title_path(comment_title.id), :method => :delete, :remote => true, :class => "comment_title_delete" %> \
    </div> \
        <% comment_title.comments.each do |comment| %> \
            <div class="comment_content">  \
              <%= link_to image_tag(comment.user.profile.photo.url(:tiny)), profile_path(comment.user.profile), :class => "comment_image" %> \
              <div class="textual_comment_content"> \
              <div class="comment_text"> \
                 <span class="name_link"> \
                     <%= link_to "#{comment.user.name}", profile_path(comment.user.profile), :class => "normal" %> \
                 </span> \
                 <%= comment.body %> \
              </div> \
              <span class="comment_footer"> \
                 <ul> \
                    <li class="list_style"><%= time_ago_in_words(comment.created_at) %> ago</li> \
                    <% unless current_user != comment.user %> \
                        <li><%= link_to "Delete", video_comment_path(:video_id => @video, :id => comment), :method => :delete, :class => "normal" %></li> \
                    <% end %> \
                </ul> \
              </span> \
              </div> \
            </div> \
        <% end %> \
     </div> \
    <% end %> \
<% end %>');

ОБНОВЛЕН JS / HTML, ПОСМОТРЕННЫЙ БРАУЗЕРОМ:

$(".comments_div").html(' \
<div class ="comment_column_narrow"> \
     \
    <div id = "comment_title_39" class="comment_title"> \
        Do you like this song? \
        <a href="/comment_titles/39" class="comment_title_delete" data-method="delete" data-remote="true" rel="nofollow">x</a> \
    </div> \
         \
            <div class="comment_content">  \
              <a href="/profiles/45" class="comment_image"><img alt="Justin meltzer" src="/system/photos/45/tiny/Justin Meltzer.jpeg?1302075215" /></a> \
              <div class="textual_comment_content"> \
              <div class="comment_text"> \
                 <span class="name_link"> \
                     <a href="/profiles/45" class="normal">Justin Meltzer</a> \
                 </span> \
                 Ok so this is what I think about this song: You need to switch back to your roots. You started as a rapper, and you need to remain a rapper. I respect you for your initiative to improve your flexibility but please stick to your roots. That's what makes you truly great. \
              </div> \
              <span class="comment_footer"> \
                 <ul> \
                    <li class="list_style">about 18 hours ago</li> \
                     \
                        <li><a href="/videos/485/comments/22" class="normal" data-method="delete" rel="nofollow">Delete</a></li> \
                     \
                 </ul> \
              </span> \
              </div> \
            </div> \
         \
     </div> \
     \
 \
<div class ="comment_column_narrow"> \
     \
    <div id = "comment_title_72" class="comment_title"> \
        sacscas \
        <a href="/comment_titles/72" class="comment_title_delete" data-method="delete" data-remote="true" rel="nofollow">x</a> \
    </div> \
         \
     </div> \
     \
 \
<div class ="comment_column_narrow"> \
     \
   <div id = "comment_title_73" class="comment_title"> \
        scascas \
        <a href="/comment_titles/73" class="comment_title_delete" data-method="delete" data-remote="true" rel="nofollow">x</a> \
    </div> \
         \
     </div> \
     \
');

Answer 1

$(".comments_div").html("...class="

В этот момент вы закрыли свою строку JS, а следующий HTML-код обрабатывается как JavaScript. Вам нужно было бы избежать кавычек или использовать альтернативу:

$(".comments_div").html("...class=\"...\"...");
$(".comments_div").html("...class='...'...");

В любом случае, я просто вырвал себе в рот немного от объема HTML, который вы вставляете в JavaScript.

Редактировать : В обновленном коде JS использует только одинарные кавычки, а HTML-разметка использует только двойные кавычки ... но контент с сервера добавляет одинарную кавычку.

$(".comments_div").html(' \
... \
please stick to your roots. That's what makes

Вы даже можете увидеть проблему в выделении синтаксиса в вашем вопросе.

Вы можете ужасно взломать это с помощью .gsub("'",''') в выводе Erb.

Answer 2

Подсветка синтаксиса здесь иллюстрирует это довольно четко: ваша строка закрыта на ", которая фактически должна быть частью содержимого строки. В Javascript нет способа узнать, какие " должны быть в вашей строке, а какие должны закрывать строку.

Решение

Используйте либо ' для внешней строки, либо " для внутренней строки (строки в html), либо " для внешней строки и ' для внутренней строки. Таким образом, строка будет хорошо определена. Другой вариант - экранировать \" все кавычки, но это может стать грязным и уродливым.

Редактировать : поскольку ваша проблема связана с пользовательским контентом, вы должны избегать ваших представлений либо во время представления, либо во время визуализации. Я не знаком с точными возможностями, предоставляемыми ruby ​​для такого рода вещей, но в той или иной форме должна быть поддержка, которая будет исключать все кавычки в пользовательском контенте.

Однако даже это своего рода обходной путь. Вы должны действительно поместить это в надлежащий HTML. Если вы используете его для динамических / ajax-функций, вы должны закодировать его в json, опционально заключенный в обратный вызов функции (например, someFunc ({'data': 'escaped string \' n stuff '})), в зависимости от того, как вы имеем дело с этим. В этом случае почти наверняка есть способы экранирования данных в json с использованием ruby, например, здесь .