JavaScript：在外部脚本中搜索和替换字符串

我在我的网站上运行这个很酷的产品小部件（ShowSpace），它将选定的产品放在上面。它使用以下脚本：

<script>
  (function(d, s, id) {
    if (d.getElementById(id)) return;
    var fjs = d.getElementsByTagName(s)[0],
        js  = d.createElement(s); js.id = id;
    js.src = "http://www.show-space.com/widgets/manager.js?api_key=0qslzweoj79lp7h03ki9";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, "script", "showspace-manager-js"));
</script>

（功能（d、s、id）{
if（d.getElementById（id））返回；
var fjs=d.getElementsByTagName[0]，
js=d.createElement；js.id=id；
js.src=”http://www.show-space.com/widgets/manager.js?api_key=0qslzweoj79lp7h03ki9";
fjs.parentNode.insertBefore（js，fjs）；
}（文件“脚本”、“展厅经理js”）；

它被这样的东西调用：

[ss widget id=my\u widget]

我现在遇到的问题是，小部件（不再受支持）对所有产品小部件使用美元（$），而我更喜欢用瑞典克朗（“kr”）显示它们，通常放在数字之后

我更喜欢：
A.将“$99”更改为“99 kr”
但是
B将“$99”更改为“SEK 99”
也行

我几乎不知道任何JavaScript，但有人告诉我，这可以用JavaScript解决。那么，我能做些什么来解决这个问题呢

---

小部件外观示例：

我个人会使用正则表达式

使用jQuery：

$(document).ready(function(){
    var contents=$('#my_widget').html();
    var rgx=/\$\s?(\d*(?:\.\d{2})?)/g;
    $('#my_widget').html(contents.replace(rgx,"$1 kr"));
});

加香草：

var contents=document.getElementById("my_widget").innerHTML;
var rgx=/\$\s?(\d*(?:\.\d{2})?)/g;
document.getElementById("my_widget").innerHTML=contents.replace(rgx,"$1 kr"));

注:

这将以以下形式查找价格：

20美元

20美元

20.50美元

20.50美元

一些它找不到的价格示例：

20美元

20.999美元

20.9美元

对于香草版本，您需要一个事件来触发javascript。这很可能是正文加载，因此您的脚本标记中会有如下内容：

body.onload=function() {
var content=...
...
};

编辑：我看过你的页面，可以看到（至少在那个特殊情况下）你的小部件是由类名定义的，我对vanilla脚本做了以下更改，它在您链接的页面上运行良好-但是您应该知道，在这个实现中，它只在每个页面上找到的小部件第一次出现时才工作。。。我认为你不太可能有超过一个页面，所以这应该没有什么大不了的

在您的页面上工作：

var contents=document.getElementsByClassName("ss-widget")[0].innerHTML;
var rgx=/\$\s?(\d*(?:\.\d{2})?)/g;
document.getElementsByClassName("ss-widget")[0].innerHTML=contents.replace(rgx,"$1 kr");

最终编辑： 正如上面显示的在小部件中伪造一些其他东西一样，这里是工作的jquery版本，包括事件处理程序注册和脚本标记

<script> 
    jQuery(document).ready( //When the document is ready, run the following function...
        function(){
            jQuery('.ss-widget .product-price').each( //Pick everything with class product-price inside everything with class ss-widget and run the following function on each
                function() {
                    var contents=jQuery(this).html(); //Get the contents of this element
                    var rgx=/\$\s?(\d*(?:\.\d{2})?)/g; //Define a regex to search for a dollar sign, followed by an optional space, followed by an arbitary amount of digits, optionally followed by a decimal plus 2 digits. Group everything but the dollar sign and space.
                    jQuery(this).html(contents.replace(rgx,"$1 kr")); //Replace any text found by the regex with it's grouped result, a space, then the text kr.
                }
            );
        }
    );
</script>

jQuery（document）.ready（//当文档准备就绪时，运行以下函数。。。
函数（）{
jQuery（'.ss widget.product price'）.each（//在everything with class ss widget中选择带有class product price的所有内容，并在每个内容上运行以下函数
函数（）{
var contents=jQuery（this）.html（）；//获取此元素的内容
var rgx=/\$\s？（\d*（？：\.\d{2}）/g；//定义一个正则表达式来搜索一个美元符号，后跟一个可选的空格，后跟任意数量的数字，也可以后跟一个十进制加上2个数字。将除美元符号和空格之外的所有内容分组。
jQuery（this.html（contents.replace（rgx，$1 kr））；//将正则表达式找到的任何文本替换为它的分组结果、一个空格，然后是文本kr。
}
);
}
);

你是今天的英雄！我不得不使用window.onload而不是body.onload，因为我使用的是高端Wordpress主题，无法让您轻松访问HTML。谢谢等等，它确实做到了，但它以某种方式使脚本崩溃，无法在小部件内滚动（右键）。。。你知道为什么会发生这种情况吗？…我想你提到的“它只会在它在每个页面上找到的小部件的第一次出现时起作用”就是它不起作用的原因？当我与小部件交互时，它似乎“死了”，它应该有悬停图像，并且可以通过单击右箭头滚动。我不是100%了解为什么会发生这种情况，我猜是我们触发的show space的api添加了一些事件处理程序。我看了一眼，但试着调试丑陋的js让我哭了，所以我有一个解决办法给你<代码>jQuery（'.ss widget.product price'）.each（function（）{contents=jQuery（this.html（）；var rgx=/\$\s？（\d*（？：\.\d{2}））/g；jQuery（this.html（contents.replace（rgx，$1 kr”）；）从好的方面看，看脚本告诉我您的页面支持jQuery，这使整个过程轻松愉快。当我运行该脚本时，您的悬停图像和滚动不受影响。谢谢！现在，它终于成功了！我花了一些时间才真正理解如何实现代码。你能为其他可能搜索相同解决方案的人把这一点放在你的完整答案中吗：window.onload=function（）{jQuery（'.ss widget.product price'）.each（function（）{contents=jQuery（this.html（）；var rgx=/\$\s？（\d*（？：\.\d{2}））/g；jQuery（this.html（contents.replace（rgx，$1 kr））；}）；