解决方案

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

无论哪种方式，我只是从你放入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的方法，其中一个例子是here。

为什么这个JS代码给我一个语法错误？

2 个答案:

解决方案