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的内容是城市号码而不是其他内容，您可以使用正则表达式，或者更改为jQuery的text()方法。不同的值需要不同的方法。

是否有更好的方法将值传递给.replace（）而不是硬编码的正则表达式和字符串？

1 个答案: