Question

我正在寻找一种方法来浏览整个网站，寻找英制单位，例如磅，英尺，英寸，并将它们转换为度量值，公斤，米，厘米。

示例：

<main>
  <h1>Top speed of new car is 300mph/h</h1>
  <p>
    Such a fast car, previously going only 250 mph, now topping speeds up to 300mph.
    And it only weighs 300lbs, 20 pounds less than before!
  </p>
</main>

变为：

<main>
  <h1>Top speed of new car is 482.8km/h</h1>
  <p>
    Such a fast car, previously going only 402km/h, now topping speeds up to 482.8km/h.
    And it only weighs 136kg, 9kg less than before!
  </p>
</main>

问题不在于如何将mph / lbs转换为kmh / kg，而是如何查找和存储诸如“10mph”，“10 mph”，“200lbs”，“200 lbs”，“200磅”等值“以一种好的方式，转换它们并最终取代它们。

任何指针都会非常有用！

编辑我希望实现的简化示例：

<p>This is 10 lbs</p>
<p>This is 20lbs</p>

<script>
  $('p').each(function(){
    var text = $(this).text().toLowerCase();

    if(text.indexOf('lbs') >= 0) {
      // Store "XX lbs" in a variable
      // Wrap the above created variable in a <span>
      // Convert the variable to kg
      // Replace the text in <span> with the value in kilogram
      // Output: <p>This is <span>4.5kg</span></p>
    }

  });
</script>

Answer 1

您可以从构建应该从哪些单位转换为单位的映射及其转换率开始：

var unitMapping = {
  mph : { unit : 'km/h', ratio : 1.609 }, // there is no such thing as mph/h ?  
  lbs : { unit : 'kg', ratio : 0.45 },
  pounds : { unit : 'kg', ratio : 0.45 }
};

现在您需要使用正确的值替换文本。首先创建一个匹配所有单位的正则表达式：

var regexp = new RegExp('(\\d*) ?(' + Object.keys(unitMapping).join('|') + ')', 'g');

编写一个聪明的替换函数，它接受一个非标准单位并返回一个标准单位：

var replaceFunction = function(match, value, unit){
  return value*unitMapping[unit].ratio + unitMapping[unit].unit;
};

最后通过获取文本并将其替换为正确的版本来将它们整合在一起：

var replaceNode = document.querySelector('main');
replaceNode.innerHTML = replaceNode.innerHTML.replace(regexp, replaceFunction);

DEMO：http://jsbin.com/UPEmEjuS/1/edit

正如您所看到的，unitMapping中有一些重复。通过使映射依赖于规范化单元，显然可以改进解决方案，但是我选择了这个选项，因为它使得代码更清晰。

Answer 2

无耻插件：webpage-unit-conversion：

可嵌入页面中的JavaScript代码，用于在页面中转换公制（SI）单位和英制帝国/美国单位之间的单位以及允许灵活选择显示哪些单位的CSS。

有一个demo页面，展示了它的工作原理。它有一些偏见，例如假设“度”是指温度而不是角度。

查找所有英制单位并替换为其公制对应单位

2 个答案: