如何在 Rails 中转义 javascript 生成的 html？

Question

在我的页面的一侧，我有一个非常简单的电子邮件表单。另一方面，我预览了建议的电子邮件。例如：

当用户填写字段时，我想更新 keyup 上的预览。我写了一个小js函数来做到这一点：

var email_previewer = function() {
  var fields = [
    { input: $('input#editor_invitation_to'), preview: $('dt.to') },
    { input: $('#editor_invitation_message'), preview: $('#message') }
  ];

  var perserve_linebreaks = function(text) {
    var html = text.replace(/\r\n\r\n/g, "</p><p>"),
      html = html.replace(/\r\n/g, "<br />"),
      html = html.replace(/\n\n/g, "</p><p>"),
      html = html.replace(/\n/g, "<br />"),
      html = "<p>"+html+"</p>";
    return html;
  };

  var sync_text = function(input, preview) {
    var text = input.val();
    if (input.is('textarea')) {
      text = perserve_linebreaks(text);
    }
    preview.text(text);
  }

  // sync preview on page load
  $.each(fields, function(index, field) {
    sync_text(field.input, field.preview);
  });

  // create keyup events
  $.each(fields, function(index, field) {
    field.input.keyup(function() {
      sync_text(field.input, field.preview);
    });
  });

}();

一切都很好，除了rails想要转义我的html并使其看起来像垃圾：

通常情况下，我知道这没有问题：只需添加 raw 或 html_safe 即可。但我不能在这里这样做，因为标记是在 keyup （或页面加载）上动态构建的。我是否缺少一些简单的解决方案？有解决方法的想法吗？我唯一的想法是在 iframe 中加载预览，这看起来很奇怪。

这真是令人沮丧得可笑。请有人帮忙！

Answer 1

我会立即怀疑您的 sync_text 函数中的 preview.text(text) 。这应该是在 DOM 中创建一个文本节点，您想要的是设置 innerHTML，以便创建多个节点。