为什么这个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。雇员再培训局代码：

$(".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='...'...");

无论哪种方式，我只是从你在 JavaScript 中放入的 HTML 数量中吐了一点。

编辑：在更新的代码中，JS仅使用单引号，HTML标记仅使用双引号...但是来自服务器的内容会添加一个引号。

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

您甚至可以在问题中以自己的语法突出显示中看到问题。

您可以使用 Erb 输出中的.gsub("'",''')来解决这个问题。

Answer 2

这里突出显示的语法相当清楚地说明了它：您的字符串被实际上应该是字符串内容一部分的"关闭。Javascript 无法知道哪些"应该在你的字符串中，哪些应该关闭字符串。

溶液

对外部字符串使用 '，对内部字符串(html 中的字符串(使用 "，或者对外部字符串使用 "，对内部字符串使用 '。这样，字符串将被很好地定义。另一种选择是"所有引号中转义，但这可能会变得混乱和丑陋。

编辑：由于您的问题来自用户生成的内容，因此您应该在提交时或呈现时转义提交。我不熟悉 ruby 为这种东西提供的确切功能，但应该有一种或另一种形式的支持，可以为您转义用户生成内容中的所有引号。

但是，即使这样也是一种解决方法。你真的应该把它放在正确的html中。如果你把它用于动态/ajax 功能，那么你应该用 json 编码它，可以选择包含在函数回调中(例如 someFunc({'data'：'escaped string \'n stuff'}((，这取决于你如何处理它。在这种情况下，几乎可以肯定有使用 ruby 将数据转义为 json 的方法，这里有一个例子。