我正在制作一个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')中的表单元格上搜索匹配的regex结果,并将其替换为城市名称。例如:悉尼,墨尔本等。当我不得不更换5-10值时,它的效果非常好,但是自从我把那590个城市加起来后,它的性能已经下降了很多。
是否有任何方法使用数组将一个值传递给.replace()函数,或者我是否完全走错了方向?
如果是第二种,是否有更好的方法在不影响性能的情况下做到这一点?
如有任何建议(或答案),将不胜感激!
干杯,
发布于 2017-06-14 08:08:09
如果您使用以下所有城市创建了一个对象:
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
的内容是城市号而不是其他任何内容,则可以使用regex,或者更改为jQuery的text()
方法。不同的价值观需要不同的方法。
https://stackoverflow.com/questions/44533673
复制相似问题