Question

我在客户端的WordPress网站上使用WP-Properties插件。价格需要成千上万的逗号。页面上的HTML是：

<li class="property_price">
<div>Price:   </div> $54000.00 USD
</li>

您无法在插件管理员中为逗号添加逗号，因为逗号在下拉菜单中指定行。所以我使用以下javascript添加逗号：

function addCommas(nStr)
{
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}
$(".property_price").each(function() {
   var self = $(this), text = self.text();
   self.text(addCommas(text));
});

这样做有效，但它也会标记标签周围的<div>，因此生成的HTML为：

<li class="property_price">
Price:    $54,000.00 USD
</li>

如何调整javascript以便添加逗号并保留<div>？

Answer 1

您可以修改单个文本节点而不是<div>元素。大多数jQuery方法都会从中排除文本节点的结果（find()，children()等），但contents()会保留它们。

$(".property_price").each(function() {
   var target = $(this).contents().last(), text = target.text();
   target.replaceWith(addCommas(text));
});

http://jsfiddle.net/n6GbC/1/

Answer 2

为什么不使用

$(".property_price").each(function() {
   var self = $(this), text = self.text();
   self.html("<div>" + addCommas(text) + "</div>");
});

只需将<div></div>标记附加到要插入的HTML即可。此外，在使用HTML

时，您应该使用.html()而不是.text()

查看http://jsfiddle.net/VTjeM/的样本。

修改

詹姆斯·蒙塔尼指出，这不起作用。但是我修改了示例，this one works。

它采用不同的方法（它获取HTML，删除div，使用逗号计算值，然后重建HTML）。

修改

以下是适用于我的完整代码。我将此标记为我接受的答案~Trishah：

function addCommas(nStr) { nStr += ''; x = nStr.split('.'); x1 = x[0]; x2 = x.length > 1 ? '.' + x[1] : ''; var rgx = /(\d+)(\d{3})/; while (rgx.test(x1)) { x1 = x1.replace(rgx, '$1' + ',' + '$2'); } return x1 + x2; } $(".property_price").each(function () { var self = $(this); // remove the div, we don't need it self.find("div").remove(); text = self.text(); self.html("<div>Price: </div>" + addCommas(text)); });

Answer 3

您可以使用.html()而不是.text()。这将允许您拆分div并在添加逗号后重建html：

$(".property_price").each(function() {
   var self = $(this), text = self.html();
   var texts = text.split('</div>');
   self.html(texts[0] + '</div>' + addCommas(texts[1]));
});

http://codepen.io/anon/pen/ihkGn

Answer 4

您还可以创建一个正则表达式来包含div中的内容，例如：

(\<div\>\w+\:?\s+?\</div\> )|\$?(\d+).(\d{1,3})

无论其中包含哪些内容，都可以获得这两个值。

Answer 5

为什么没有人建议修改wordpress插件？你为什么要在你的页面上引入一堆javascript，你可以简单地做一些这样的插件输出html的价格：

<?php echo money_format($price); ?>

OP，如果您发布有关该插件的更多信息，我可以帮助您。

Javascript在不删除DIV的情况下将逗号添加到价格

5 个答案: