如何使用jquery替换html页面中所有价格实例（以“ US $”开头）？

Question

说我有以下HTML：

<div class="L-shaped-icon-container">
  <span class="L-shaped-icon">Something is US$50.25 and another thing is US$10.99.</span>
</div>

我想要做的是使用jquery在实时页面上将所有US $ XX.xx实例替换为 GBP£YY.yy 。

GBP的价值取决于我自己的货币兑换率。

因此，我假设我首先需要使用正则表达式来获取价格的所有实例，这些实例的价格应以USD $开头并以.xx结尾。 价格将始终显示美分。

然后，我被困在完成下一部分的最佳方法中。

我应该将这些实例包装在带有类的span标记中，然后使用jquery.each（）函数循环遍历每个实例，然后将内容替换为jquery（this）.html（“ GBP£YY.yy”）吗？

任何帮助我走上正确道路的帮助将不胜感激。 多谢你们。

Answer 1

文本替换的基本方法：

var textWalker = function (node, callback) {
    var nodes = [node];
    while (nodes.length > 0) {
        node = nodes.shift();
        for (var i = 0; i < node.childNodes.length; i++) {
            var child = node.childNodes[i];
            if (child.nodeType === child.TEXT_NODE)
                callback(child);
            else
                nodes.push(child);
        }
    }
};

您需要做的事情：

var USDinGBP = 0.640573954;
textWalker(document, function (n) {
    n.nodeValue = n.nodeValue.replace(/(USD?\$(\d+(\.\d+)?))/g, function($0, $1, $2){
        return "GBP£" + (parseFloat($2) * USDinGBP).toFixed(2);
    })
})

您可以在任何网站上将其触发。 它甚至会替换标题等。

告诉您不使用jquery的好处：
jQuery将以浏览器兼容的方式处理和包装每个元素。
使用本地javascript解决方案可以大大加快此过程。
使用本机textnode也是有益的，因为它不会破坏子元素的事件处理程序。

您还应该考虑使用fastdom 。
使用jquery还是本机js都没有关系。 在写入元素后，dom必须先执行某些任务才能再次读取它。 最后，您将为每个已编辑的元素腾出一些时间。

给你一个禁食的例子：

var textWalker = function (node, callback) {
    var nodes = [node];
    while (nodes.length > 0) {
        node = nodes.shift();
        for (var i = 0; i < node.childNodes.length; i++) {
            var child = node.childNodes[i];
            if (child.nodeType === child.TEXT_NODE)
                callback(child);
            else
                nodes.push(child);
        }
    }
};

var textReplace = function (node, regex, callback) {
    textWalker(node, function (n) {
        fastdom.read(function () {
            var text = n.nodeValue;
            if (!regex.test(text)) {
                return;
            }
            text = text.replace(regex, callback);
            fastdom.write(function () {
                n.nodeValue = text;
            });
        });
    });
};

// put this function call into your onload function:
var USDinGBP = 0.640573954;
textReplace(document, /(USD?\$(\d+(\.\d+)?))/g, function($0, $1, $2){
    return "GBP£" + (parseFloat($2) * USDinGBP).toFixed(2);
});

这基本上可以立即完成工作。

如果您想更进一步，可以将其添加到jquery中，如下所示：

jQuery.fn.textReplace = function (regex, callback) {
    this.each(function () {
        textReplace(this, regex, callback);
    });
};

并这样称呼它：

var USDinGBP = 0.640573954;

jQuery(".L-shaped-icon").textReplace(/(USD?\$(\d+(\.\d+)?))/g, function($0, $1, $2){
    return "GBP£" + (parseFloat($2) * USDinGBP).toFixed(2);
});

Answer 2

如果所有这些值都直接在范围内，则可以给它们一个唯一的类并使用它来遍历它们，则可以使用以下命令

1. 首先，在变量中获取字符串的数字部分
2. 转换货币并将其存储在其他变量中。
3. 用GBP代替美元
4. 用转换后的值替换字符串的数字部分

jQuery的：

("span").each(function() { 
     var currencyVal=$(this).text().match(/\d/);
     var convertedVal=currencyVal * 100;      // just for example.
     $(this).text($(this).text().replace(/^US$/,'GBP£'));
     $(this).text($(this).text().replace(/\d/,convertedVal));

 });

Answer 3

希望对您有帮助。 这是工作提琴

HTML：

<div class="L-shaped-icon-container">
  <span class="L-shaped-icon">Something is US$50.25 and another thing is US$10.99.</span>
  <span class="L-shaped-icon">Something is BR$20.25 and another thing is US$10.99.</span>
  <span class="L-shaped-icon">Something is US$10.25 and another thing is US$10.99.</span>
  <span class="L-shaped-icon">Something is US$50.20 and another thing is GR$10.99.</span>    
</div>

<button class="btnUpdate">Update</button>

JavaScript代码：

function UpdateCurrency(){

var UStoGB=10;
$('span').each(function(e){

    var matchedText = $(this).text().match(/US\$\S+/g);
    var updatedText = $(this).text();
    if(matchedText){        
        for(var i=0;i<= matchedText.length;i++){

            if(matchedText[i]){            
                var currentValue=matchedText[i].replace('US$','');            
                if(!currentValue) currentValue=0;        
                var newCurrency = ( parseFloat(currentValue) * UStoGB);

                updatedText= updatedText.replace(matchedText[i],'GBP£'+newCurrency);            
            }        
        }        
    }

    $(this).text(updatedText);
});
return false;
}