javascript - JavaScript 中的 ruby​​ 给出 Uncaught SyntaxError : Unexpected identifier

Question

我正在构建演示文稿生成器并尝试将参数中的数据写入 JavaScript 对象 $("#data-store")。一切都很顺利，但@content 却出现了问题。它包含一张幻灯片的 html。当我尝试使用parent.$("#data-store").data("content[<%=n%>]", "<%= @content[n.to_s].html_safe %>");在控制台中出现 Uncaught SyntaxError:意外的标识符。

  var fillUpData = function() {
       if ( $.isEmptyObject(parent.$("#data-store").data())) {
         console.log("empty")
         parent.$("#data-store").data("wallpaper", "<%= @wallpaper %>" );
         parent.$("#data-store").data("imageNum", "<%= @imageNum %>" );
          <% @num_slides.times do |n| %> 
         parent.$("#data-store").data("background[<%=n%>]", "<%= @background[n.to_s] %>" );
         parent.$("#data-store").data("content[<%=n%>]", "<%= @content[n.to_s].html_safe %>" );
          <% end %>
         // parent.$("#data-store").data("data", [<%= @datastore.html_safe %>]);
          } else {
        console.log("notempty");
        }
      }

我认为这可能是@content中数据结构的问题。@content 的参数看起来像这样:

"content"=>{"0"=>"<img id=\"link2\" style=\"position: absolute\" src=\"http://i.imgur.com/X0XCFys.png \"><div class=\"editor\" contenteditable=\"true\" style=\"position: absolute; left: 743px; top: 312px;\"><h2 class=\"text2\">Title</h2></div><div class=\"ui-wrapper ui-draggable\" style=\"overflow: hidden; position: absolute; width: 128px; height: 128px; top: 225.1111125946045px; left: 508.1111145019531px; margin: 0px;\"><img id=\"link1\" style=\"position: static; margin: 0px; resize: none; zoom: 1; display: block; height: 128px; width: 128px;\" src=\"http://i.imgur.com/qTXDZhT.png \" class=\"ui-resizable\"><div class=\"ui-resizable-handle ui-resizable-e\" style=\"z-index: 90;\"></div><div class=\"ui-resizable-handle ui-resizable-s\" style=\"z-index: 90;\"></div><div class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\" style=\"z-index: 90;\"></div><img class=\"icon-layer-up icon-on-img\" src=\"/assets/icon_layer_up.png\" style=\"z-index: 2;\"><img class=\"icon-layer-down icon-on-img\" src=\"/assets/icon_layer_down.png\" style=\"z-index: 2;\"><img class=\"icon-trash1 icon-on-img\" src=\"/assets/icon_trash.png\" style=\"z-index: 2;\"><img class=\"icon-copy-el icon-on-img\" src=\"/assets/icon_copy.png\" style=\"z-index: 2;\"><img class=\"icon-layer-up icon-on-img\" src=\"/assets/icon_layer_up.png\" style=\"z-index: 2;\"><img class=\"icon-layer-down icon-on-img\" src=\"/assets/icon_layer_down.png\" style=\"z-index: 2;\"><img class=\"icon-trash1 icon-on-img\" src=\"/assets/icon_trash.png\" style=\"z-index: 2;\"><img class=\"icon-copy-el icon-on-img\" src=\"/assets/icon_copy.png\" style=\"z-index: 2;\"></div>\r\n                    \r\n         \r\n    \r\n        ", "1"=>"\r\n                    \r\n         \r\n    \r\n        ", "2"=>"\r\n                    \r\n         \r\n    \r\n        ", "3"=>"\r\n                    \r\n         \r\n    \r\n        ", "4"=>"\r\n                    \r\n         \r\n    \r\n        ", "5"=>"\r\n                    \r\n         \r\n    \r\n        ", "6"=>"\r\n                    \r\n         \r\n    \r\n        ", "7"=>"\r\n                    \r\n         \r\n    \r\n        "},

当我在控制台中检查此函数时，我得到如下信息:

 var fillUpData = function() {
   if ( $.isEmptyObject(parent.$("#data-store").data())) {
     console.log("empty")
     parent.$("#data-store").data("wallpaper", "http://i.imgur.com/cRrY9Fk.png" );
     parent.$("#data-store").data("text", "" );
     parent.$("#data-store").data("imageNum", "1" );
     parent.$("#data-store").data("background[0]", "url(http://i.imgur.com/nYkdOne.png)" );
     parent.$("#data-store").data("content[0]", "<div class="editor ui-resizable ui-draggable" contenteditable="true" style="position: absolute; left: 298.1111602783203px; top: 193.09722900390625px;"><h2 class="text2">Titsadasdle</h2><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div><img class="icon-layer-up2 icon-on-edit" src="/assets/icon_layer_up.png" style="z-index: 2;"><img class="icon-layer-down2 icon-on-edit" src="/assets/icon_layer_down.png" style="z-index: 2;"><img class="icon-trash2 icon-on-edit" src="/assets/icon_trash.png" style="z-index: 2;"><i class="icon-move icon-on-edit" style="z-index: 2;"></i><i class="icon-font font2 icon-on-edit" style="z-index: 2;"></i><img class="icon-font-size icon-on-edit" src="/assets/font_size2.png" style="z-index: 2;"></div><div class="ui-wrapper ui-draggable" style="overflow: hidden; position: absolute; width: 128px; height: 128px; top: 285.1111125946045px; left: 52.111114501953125px; margin: 0px;"><img id="link1" style="position: static; margin: 0px; resize: none; zoom: 1; display: block; height: 128px; width: 128px;" src="http://i.imgur.com/qTXDZhT.png " class="ui-resizable"><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div><img class="icon-layer-up icon-on-img" src="/assets/icon_layer_up.png" style="z-index: 2;"><img class="icon-layer-down icon-on-img" src="/assets/icon_layer_down.png" style="z-index: 2;"><img class="icon-trash1 icon-on-img" src="/assets/icon_trash.png" style="z-index: 2;"><img class="icon-copy-el icon-on-img" src="/assets/icon_copy.png" style="z-index: 2;"><img class="icon-layer-up icon-on-img" src="/assets/icon_layer_up.png" style="z-index: 2;"><img class="icon-layer-down icon-on-img" src="/assets/icon_layer_down.png" style="z-index: 2;"><img class="icon-trash1 icon-on-img" src="/assets/icon_trash.png" style="z-index: 2;"><img class="icon-copy-el icon-on-img" src="/assets/icon_copy.png" style="z-index: 2;"></div>



    " );
     parent.$("#data-store").data("background[1]", "url(http://i.imgur.com/zXJv24z.png)" );
     parent.$("#data-store").data("content[1]", "



    " );
     parent.$("#data-store").data("background[2]", "" );
     parent.$("#data-store").data("content[2]", "



    " );
     parent.$("#data-store").data("background[3]", "" );
     parent.$("#data-store").data("content[3]", "



    " );
     parent.$("#data-store").data("background[4]", "" );
     parent.$("#data-store").data("content[4]", "



    " );
     parent.$("#data-store").data("background[5]", "" );
     parent.$("#data-store").data("content[5]", "



    " );
     parent.$("#data-store").data("background[6]", "" );
     parent.$("#data-store").data("content[6]", "



    " );
     parent.$("#data-store").data("background[7]", "" );
     parent.$("#data-store").data("content[7]", "



    " );
      } else {
    console.log("notempty");
    }
  }

如何才能将每个内容的参数写入 JavaScript 对象 data()？

Answer 1

您生成的 HTML 有问题:

parent.$("#data-store").data("content[0]", "<div class="editor ui-resizable ui-draggable" contenteditable="true" style="position: absolute; left: 298.1111602783203px; top: 193.09722900390625px;"><h2 class="text2">Titsadasdle</h2><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div><img class="icon-layer-up2 icon-on-edit" src="/assets/icon_layer_up.png" style="z-index: 2;"><img class="icon-layer-down2 icon-on-edit" src="/assets/icon_layer_down.png" style="z-index: 2;"><img class="icon-trash2 icon-on-edit" src="/assets/icon_trash.png" style="z-index: 2;"><i class="icon-move icon-on-edit" style="z-index: 2;"></i><i class="icon-font font2 icon-on-edit" style="z-index: 2;"></i><img class="icon-font-size icon-on-edit" src="/assets/font_size2.png" style="z-index: 2;"></div><div class="ui-wrapper ui-draggable" style="overflow: hidden; position: absolute; width: 128px; height: 128px; top: 285.1111125946045px; left: 52.111114501953125px; margin: 0px;"><img id="link1" style="position: static; margin: 0px; resize: none; zoom: 1; display: block; height: 128px; width: 128px;" src="http://i.imgur.com/qTXDZhT.png " class="ui-resizable"><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div><img class="icon-layer-up icon-on-img" src="/assets/icon_layer_up.png" style="z-index: 2;"><img class="icon-layer-down icon-on-img" src="/assets/icon_layer_down.png" style="z-index: 2;"><img class="icon-trash1 icon-on-img" src="/assets/icon_trash.png" style="z-index: 2;"><img class="icon-copy-el icon-on-img" src="/assets/icon_copy.png" style="z-index: 2;"><img class="icon-layer-up icon-on-img" src="/assets/icon_layer_up.png" style="z-index: 2;"><img class="icon-layer-down icon-on-img" src="/assets/icon_layer_down.png" style="z-index: 2;"><img class="icon-trash1 icon-on-img" src="/assets/icon_trash.png" style="z-index: 2;"><img class="icon-copy-el icon-on-img" src="/assets/icon_copy.png" style="z-index: 2;"></div>")
//                                                     ^ etc.

作品中存在未转义的引号。在这里调用 .html_safe 是不够的；您需要通过一些代码来运行 HTML，以将 " 替换为 \"。幸运的是，这是一个简单的任务:

tmp = @content[n.to_s].html_safe
begin
  # regex matches a double-quote not preceded by a backslash
  tmp[/(?<!\\)"/] = '\\"' while true
rescue
  # the regex failed; all quotes are now escaped (or no quotes in the first place)
end
# now echo tmp

parent.$("#data-store").data("content[0]", "<div class=\"editor ui-resizable ui-draggable\" contenteditable=\"true\" style=\"position: absolute; left: 298.1111602783203px; top: 193.09722900390625px;\"><h2 class=\"text2\">Titsadasdle</h2><div class=\"ui-resizable-handle ui-resizable-e\" style=\"z-index: 90;\"></div><div class=\"ui-resizable-handle ui-resizable-s\" style=\"z-index: 90;\"></div><div class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\" style=\"z-index: 90;\"></div><img class=\"icon-layer-up2 icon-on-edit\" src=\"/assets/icon_layer_up.png\" style=\"z-index: 2;\"><img class=\"icon-layer-down2 icon-on-edit\" src=\"/assets/icon_layer_down.png\" style=\"z-index: 2;\"><img class=\"icon-trash2 icon-on-edit\" src=\"/assets/icon_trash.png\" style=\"z-index: 2;\"><i class=\"icon-move icon-on-edit\" style=\"z-index: 2;\"></i><i class=\"icon-font font2 icon-on-edit\" style=\"z-index: 2;\"></i><img class=\"icon-font-size icon-on-edit\" src=\"/assets/font_size2.png\" style=\"z-index: 2;\"></div><div class=\"ui-wrapper ui-draggable\" style=\"overflow: hidden; position: absolute; width: 128px; height: 128px; top: 285.1111125946045px; left: 52.111114501953125px; margin: 0px;\"><img id=\"link1\" style=\"position: static; margin: 0px; resize: none; zoom: 1; display: block; height: 128px; width: 128px;\" src=\"http://i.imgur.com/qTXDZhT.png \" class=\"ui-resizable\"><div class=\"ui-resizable-handle ui-resizable-e\" style=\"z-index: 90;\"></div><div class=\"ui-resizable-handle ui-resizable-s\" style=\"z-index: 90;\"></div><div class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\" style=\"z-index: 90;\"></div><img class=\"icon-layer-up icon-on-img\" src=\"/assets/icon_layer_up.png\" style=\"z-index: 2;\"><img class=\"icon-layer-down icon-on-img\" src=\"/assets/icon_layer_down.png\" style=\"z-index: 2;\"><img class=\"icon-trash1 icon-on-img\" src=\"/assets/icon_trash.png\" style=\"z-index: 2;\"><img class=\"icon-copy-el icon-on-img\" src=\"/assets/icon_copy.png\" style=\"z-index: 2;\"><img class=\"icon-layer-up icon-on-img\" src=\"/assets/icon_layer_up.png\" style=\"z-index: 2;\"><img class=\"icon-layer-down icon-on-img\" src=\"/assets/icon_layer_down.png\" style=\"z-index: 2;\"><img class=\"icon-trash1 icon-on-img\" src=\"/assets/icon_trash.png\" style=\"z-index: 2;\"><img class=\"icon-copy-el icon-on-img\" src=\"/assets/icon_copy.png\" style=\"z-index: 2;\"></div>")

您可以使用类似的策略来逃避 JavaScript 可能提示的任何其他内容。