转义 rails .erb 文件中的特殊字符

Question

name = "SHE® WOMEN'S RACER FLARE TANK"

当我尝试使用名称将值注入 div 的数据属性时，例如

<div data-name= <%= name  %> > XYZ </div>

浏览器中的输出是

<div data-name="SHE® women's=" racer="" flare="" tank="" >
  XYZ
</div>

如何转义特殊字符？

Answer 1

您可以使用 content_tag 助手来制作自定义 HTML 数据属性：

<%= content_tag(:div, "XYZ", data: { name: name }) %>

编辑
要回答您的评论，您可以将一个块传递给具有您需要的任何 HTML 结构的内容标签。您还可以添加 html 选项，例如 id 或 class:

<%= content_tag(:div, id: "product_#{@product.id}", class: ['product-list-item', col_css, @product.name],
                data: { name: @product.name, hook: "products_list_item", sku: @product.sku, product_id: @product.id }) do %>
  # add any html content you need
  <h1>Title</h1>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<% end %>

Answer 2

只需使用 tag.div helper。这个助手允许你写你的例子

<div id="product_<%= product.id %>" class="product-list-item <%= col_css %> <%= product.product_type %>" data-hook="products_list_item" itemscope itemtype="schema.org/Product"; data-name= <%= product.name %> data-sku= <%= product.sku %> data-product-id= <%= product.id %> data-price= <%=lowest ? lowest : display_price(variants.first || product) %> > 
</div>

像下面的和它负责正确转义字符：

<%= tag.div(
      id:    dom_id(product),
      class: ['product-list-item', col_css,product.product_type],
      data: { 
        hook:      'products_list_item',
        name:       product.name,
        sku:        product.sku,
        product_id: product.id,
        price:      lowest ? lowest : display_price(variants.first || product)
      },
      itemscope: 'itemscope',
      itemtype: 'schema.org/Product'
    ) %>

您可能要考虑将此代码移至辅助程序中。

tag 助手也允许嵌套标签。来自 the docs 的示例：

tag.div tag.p('Hello world!')  # => <div><p>Hello world!</p></div>

转义 rails .erb 文件中的特殊字符

Escaping special characters in rails .erb file

html

ruby

ruby-on-rails

erb