轨道4+；jQuery：使用helper方法实时预览表单输入

我的应用程序中有一个新的配方表单，我想在提交之前给用户一个实时预览他们的帖子。我找到了一个相对简单的方法来实现这一点，因为配方的名称：

$(".health-form-section input").on("keyup", function(){
    var $this = $(this);
    $('#show_recipe' + ' ' + '.' + $this.attr('id') + '').html($this.val());
});

…我的观点如下

<div id="show_recipe">
    <div class="page-header">
        <h1 class="recipe_name"></h1> <!-- This gets updated -->
    </div>
    ...
</div>

...

但是当我需要在显示文本之前格式化文本时，问题就出现了。
我通常这样显示文本，这样我就可以提供一个成分数组，并将它们显示为html列表。我应该使用助手函数吗？如何将文本传递给函数

<div class="show-ingredients">
    <strong>Ingredients:</strong>
    <ul class="ing-list">
        <% @recipe.ingredients.split("\n").each do |ing| %>
        <li><%= ing unless ing.blank? %></li>
        <% end %>
    </ul>
</div>

成分：