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

【问题标题】：How do I replace all instances of prices (beginning with "US$") in html page using jquery?如何使用 jquery 替换 html 页面中的所有价格实例（以“US$”开头）？
【发布时间】：2015-08-06 08:56:55
【问题描述】：

假设我有以下 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。

英镑的价值将由我自己的货币兑换率决定。

所以我假设我首先需要做的是使用正则表达式来获取所有以 USD$ 开头并在 之后结束的价格实例。 xx？价格将始终显示美分。

然后，我不知道完成下一部分的最佳方法是什么。

我是否应该用一个类将这些实例包装在一个 span 标签中，然后使用 jquery.each() 函数循环遍历每个实例并用 jquery(this).html("GBP£YY.yy") 替换内容？

任何帮助我走上正确道路的帮助将不胜感激。谢谢大家。

【问题讨论】：

我认为您需要使用/\bUS\$(\d+\.\d+)/g 正则表达式调用replace()，然后使用回调中的价格执行所有操作（例如return "GBP" + toGBP(m[1]);，其中toGBP 是转换器函数)。
您也可以使用 split 和 indexOf 代替正则表达式和 $('*') 选择器或 $('p, span,...') 来定位所有冷持有价格的标签。此外，重要的是要弄清楚是否存在应保持不变的 US$ 实例，或者实例之间的数字格式是否可能不同。
你从来没有回应也没有接受答案，这有点令人遗憾。

标签： javascript jquery regex

【解决方案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 解决方案会大大加快这个过程。
使用原生文本节点也是有益的，因为它不会破坏子元素的事件处理程序。

您还应该考虑使用fastdom。
无论您使用的是 jquery 还是本机 js。在写入元素后，dom 必须执行某些任务才能再次读取它。最后你会为每个编辑的元素浪费一些时间。

给你一个 fastdom 的例子：

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);
});

【讨论】：

【解决方案2】：

如果所有这些值都直接在span中，如果不是你可以给它们一个唯一的类并使用它来迭代它们，你可以使用下面的

您首先在变量中获取字符串的数字部分
将货币转换存储在其他变量中。
用英镑代替美元
用转换后的值替换字符串的数字部分

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));

 });

【讨论】：

这不也会改变不以美元为单位的价值吗？
你可以给所有 span 的 congaing 这些值一个唯一的类。它假设只有需要转换的值。
@user3154108 是的。好吧..我现在添加了一个合适的解决方案。

【解决方案3】：

我希望这会对你有所帮助。这是工作Fiddle

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;
}

【讨论】：