javascript - 有没有比硬编码正则表达式和字符串更好的方法将值传递给 .replace() ？

Question

我正在制作一个 Chrome 扩展，它使用 jQuery 替换网页上表格上的值。现在，如果我想替换 5-10 个值，这通常不代表问题...我的问题来自于必须替换最多 600 个值!

作为背景，该扩展程序与网站中托管的表格进行交互，该网站具有“城市 ID”而不是城市名称。 - 这对人们来说真的很困难，因为他们实际上需要在大脑中将城市号码与城市名称联系起来。

编辑:代码看起来有点像这样:

var $sydney = $('td').html(function(i, html){ return html.replace(/^1$/g, 'Sydney'); });
var $melbourne = $('td').html(function(i, html){ return html.replace(/^2$/g, 'Melbourne'); });
var $perth = $('td').html(function(i, html){ return html.replace(/^3$/g, 'Perth'); });
var $christchurch = $('td').html(function(i, html){ return html.replace(/^4$/g, 'Christchurch'); });
var $canberra = $('td').html(function(i, html){ return html.replace(/^5$/g, 'Canberra'); });
var $newcastle = $('td').html(function(i, html){ return html.replace(/^6$/g, 'Newcastle'); });
var $geelong = $('td').html(function(i, html){ return html.replace(/^7$/g, 'Geelong'); });
var $mornington = $('td').html(function(i, html){ return html.replace(/^8$/g, 'Mornington Peninsula'); });
var $tauranga = $('td').html(function(i, html){ return html.replace(/^9$/g, 'Tauranga'); });
var $hamilton = $('td').html(function(i, html){ return html.replace(/^10$/g, 'Hamilton'); })

如您所见，脚本在 HTML 中的表格单元格(“td”)上搜索匹配的正则表达式结果，并将其替换为城市名称。例如:悉尼、墨尔本等。当我不得不替换 5-10 个值时，它的效果非常好，但自从我添加了这 590 个城市后，它的性能下降了很多。

有什么方法可以使用数组将值传递给 .replace() 函数，还是我完全走错了方向？

如果是第二种，有没有更好的方法可以在不影响性能的情况下做到这一点？

任何建议(或答案)将不胜感激!

干杯，

Answer 1

如果您创建一个包含所有城市的对象，如下所示:

var cities = {
    1: 'Sydney',
    2: 'Melbourne',
    3: 'Perth',
    4: 'Christchurch',
    5: 'Canberra',
    6: 'Newcastle',
    7: 'Geelong',
    8: 'Mornington Peninsula',
    9: 'Tauranga',
    10: 'Hamilton'
}

并将您的代码更改为:

$('td').html(function(i, html){
  if (cities.hasOwnProperty(html)) {
      return cities[html];
  }
  return html;
});

您可以大大减少代码时间。

var cities = {
  1: 'Sydney',
  2: 'Melbourne',
  3: 'Perth',
  4: 'Christchurch',
  5: 'Canberra',
  6: 'Newcastle',
  7: 'Geelong',
  8: 'Mornington Peninsula',
  9: 'Tauranga',
  10: 'Hamilton'
};

$('td').html(function(i, html) {
  if (cities.hasOwnProperty(html)) {
    return cities[html];
  }
  return html;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
  </tr>
  <tr>
    <td>15</td>
  </tr>
  <tr>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
  </tr>
  <tr>
    <td>38</td>
  </tr>
  <tr>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
  </tr>
  <tr>
    <td>8</td>
  </tr>
  <tr>
    <td>9</td>
  </tr>
  <tr>
    <td>10</td>
  </tr>
</table>

为了使其更加简单，您可能应该向您希望代码影响的单元格添加一个类。

编辑:

正如用户 Makyen 所说，如果您不确定 td 的内容是城市号码而不是其他内容，您可以使用正则表达式，或更改为 text() jQuery 的 方法。不同的值(value)观需要不同的方法。