JavaScript脚本实现随手记商家自动排序

随手记商家显示问题

最近将手机上的记账软件由 EasyMoney 更换为随手记之后，在使用随手记时发现随手记的商家分类功能在实际记账时非常不方便。记账时选择商家只有 “最近商家” 和 “所有商家” 这两个选项，但这里面的所有商家列表是按商家分类添加的顺序排列的，而不是按商家的名称排序的，这样选择起来就非常困难。虽然随手记支持通过安装其它 App 识别当前位置旁边的商家，但小的商家往往无法识别，而且有时是消费完了过段时间才记账，并不特别实用。

看一张随手记上的商家列表图片：

像我的情况一共有将近 300 个商家，如果要在这个长长得未排序的商家列表里找到我需要的商家，还是比较麻烦的。随手记在 Web 版的设置界面中支持调整商家的位置，而且只能支持在某一个商家上点向上、向下按钮调整位置，不支持拖动，就算支持拖动，对于将近 300 个商家的情况，如果要一一拖动让所有商家按名称来排序还是极其痛苦的。

JavaScript 对商家排序

为此我专门用浏览器调试工具研究了下调整商家位置的请求，发现调整位置时提交的数据实际是所有商家在一起的，这样就好办了，我写了一段 JavaScript 脚本用于在浏览器上直接自动按名称排序（数字在前，英文次之，然后是中文按拼音排序）所有商家。

首先使用 IE9 或以上的浏览器（脚本要求，不要使用 360、搜狗之类的浏览器防止脚本运行有问题，嘿嘿）访问随手记的 Web 版，进入设置 - 分类设置 - 商家分类，也就是这个地址：https://money07.feidee.com/money/category/storeCategory.do，在这个页面上你可以看到所有商家的列表。

然后拷贝下面这一段 JavaScript 代码粘贴到浏览器地址栏中，注意这里只有一行，必须整行全部拷贝下来：

javascript:rows = document.getElementsByClassName("lb-row"); var shops = []; var shids = []; var re = /^category\d+$/; for (var i = 0; i < rows.length; i++) { if (re.test(rows[i].id)) { var t = rows[i].getElementsByClassName("li-level2"); if (t.length > 0) { shops.push(t[0].innerHTML); shids[t[0].innerHTML] = rows[i].id.substr(8); } } } shops.sort(function(a,b){return a.localeCompare(b)}); pstr = ""; for (i = 0; i < shops.length; i++) { if (i > 0) { pstr += "-"; } pstr += shids[shops[i]]; } var p = document.createElement("DIV"); p.innerHTML = "<form name='frm' method='post' action='/money/category/storeCategory.rmi'><input type='hidden' name='m' value='updateOrder'/><input type='hidden' name='idList' value='" + pstr + "'/></form>"; document.body.appendChild(p); document.frm.submit(); void(0)

特别需要注意的是拷贝到 IE 浏览器的地址上你可能会发现前面少了 javascript: 这个前缀，这时必须你手工把 javascript: 这个前缀补到地址的最前面（这一步不可缺少），如下图所示：

然后在地址栏上按下回车键，脚本就会自动执行，并且返回一个空白的网页，这一般表示执行成功了。接着可以点击浏览器后退按钮回到商家分类页面看看执行的成果：

可以看到商家被已经自动按名称来排序了，接着只要在手机或者平板上同步一下就可以正常使用了，必须比随手记默认的坑爹商家排序好多了。

代码解析

对 Web 开发比较熟悉的同学应该比较熟悉下面的原始 JavaScript 代码哈，直接使用 JS 自带的 localeCompare 函数进行字符串排序：

rows = document.getElementsByClassName("lb-row");

var shops = [];
var shids = [];
var re = /^category\d+$/;

for (var i = 0; i < rows.length; i++) {
	if (re.test(rows[i].id)) {
		var t = rows[i].getElementsByClassName("li-level2");
		if (t.length > 0) {
			shops.push(t[0].innerHTML);
			shids[t[0].innerHTML] = rows[i].id.substr(8);
		}
	}
}

shops.sort(function(a,b){ return a.localeCompare(b)});

pstr = "";
for (i = 0; i < shops.length; i++) {
	if (i > 0) {
		pstr += "-";
	}
	pstr += shids[shops[i]];
}

var p = document.createElement("DIV");
p.innerHTML = "<form name='frm' method='post' action='/money/category/storeCategory.rmi'><input type='hidden' name='m' value='updateOrder'/><input type='hidden' name='idList' value='" + pstr + "'/></form>";
document.body.appendChild(p);
document.frm.submit();

以上脚本和修改为个人经验，如有任何问题欢迎提出指正哦，玩的开心~~~ ^_^