Javascript -将数组拆分为单独的<td>

Question

我正在努力将一个数组分成3个独立的td。

$(runner).find(".third_level .jockey_stats").html(runners[i].jockey_stats);
$(runner).find(".third_level .trainer_stats").html(runners[i].trainer_stats);

jockey_stats和trainer_stats都是保存3条信息的数组，呈现方式如下：

<td>248-28(11.3%)-35</td>

我希望它像这样显示在表格中

<td>248</td>
<td>28(11.3%)</td>
<td>35</td>

HTML

<table class="third_level" cellspacing="0" border="0">
<tbody>
    <tr>
        <th><%= I18n.t("views.wagering.third_level.career_earnings") %></th>
        <th><%= I18n.t("views.wagering.third_level.jockey_stats") %></th>
        <th><%= I18n.t("views.wagering.third_level.trainer_stats") %></th>
    </tr>
    <tr>
        <% if @third_level_runner %>
            <td class="earnings tl_data"><%= number_to_currency(@third_level_runner.total_earnings, :unit => "₪", :precision => 0, :delimiter => ",") %></td>
            <td class="jockey_stats tl_data"><%= @third_level_runner.jockey_stats %></td>
            <td class="trainer_stats tl_data"><%= @third_level_runner.trainer_stats %></td>
        <% else %>
            <td class="earnings tl_data">-</td>
            <td class="jockey_stats tl_data">-</td>
            <td class="trainer_stats tl_data">-</td>
        <% end %>
    </tr>
</tbody>

​

Answer 1

好吧，我会咬人的：

$(runner).find(".third_level .jockey_stats").html(runners[i].jockey_stats.replace(/-/g, , '</td><td>'));

这应该能起到作用。

如果您不想使用正则表达式：

$(runner).find(".third_level .jockey_stats").html(runners[i].jockey_stats.split('-').join('</td><td>'));

正则表达式方法的工作原理如下:表达式匹配短划线(-)，并将其替换为</td><td>，通过使用全局标志(g)，将表达式应用于字符串中的所有短划线。

实际上，<td>248-28(11.3%)-35</td>变成了<td>248</td><td>28(11.3%)-35</td>，然后变成了<td>248</td><td>28(11.3%)</td><td>35</td>

在这种情况下，join-split方法会带来更多的开销，首先将字符串分解为字符串数组：

'<td>248-28(11.3%)-35</td>'.split('-');

变成：

['<td>248','28(11.3%)','35</td>']

使用</td><td>作为分隔符，这将产生

<td>248</td><td>28(11.3%)</td><td>35</td>

但是，如果标记中可能包含破折号，则应该使用正则表达式方法，并对表达式稍加修改。懒惰的解决方案可能是：

jockey_stats.replace(/\>[^<]*/g, function(inner)
{//inner matches substring starting from first > to first <
    return inner.replace(/-/g, '</td><td>');
});

这样，包含破折号的标记内的属性将不会被处理。

表达式非常简单：

\>[^<]*匹配>和所有不是<的后续字符，换句话说，匹配>和<之间的所有字符。

然后将这个匹配项传递给一个函数，该函数用</td><td>替换所有的破折号。

例如：

console.log('<td data-type="foo">248-28(11.3%)-35</td>'.replace(/\>[^<]*/g, function(inner)
{
    return inner.replace(/-/g, '</td><td>');
}));

日志"<td data-type="foo">248</td><td>28(11.3%)</td><td>35</td>"