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

时间:2014-04-30 20:39:14

标签: javascript jquery html regex wordpress

我在客户端的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>

5 个答案:

答案 0 :(得分:2)

您可以修改单个文本节点而不是<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/

答案 1 :(得分:0)

为什么不使用

$(".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));
});

答案 2 :(得分:0)

您可以使用.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

答案 3 :(得分:0)

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

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

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

答案 4 :(得分:0)

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

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

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