javascript - 如何在 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 并让它看起来像垃圾：

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

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

Answer 1

我会立即怀疑preview.text(text)你的sync_text功能。那应该是在 DOM 中创建一个文本节点，而您想要设置 innerHTML 以便创建几个节点。