TinySortで数字を自然な順番で並び替えしたい

Question

HTMLのliタグを文字列によって並び替えることができるTinySortを使用しております。
これを使うと例えば下記のような並びがあったとき、

<ul>
  <li>ZZZ</li>
  <li>AAA</li>
  <li>DDD</li>
</ul>

<!--並び替えを実行すると↓-->

<ul>
  <li>AAA</li>
  <li>DDD</li>
  <li>ZZZ</li>
</ul>

という具合に50音順で並び替えることができます。
ところが下記のリストを並び替えようとしてもうまく並び替えてくれません。

<ul>
  <li>9月</li>
  <li>8月</li>
  <li>10月</li>
</ul>

<!--並び替えを実行すると↓-->

<ul>
  <li>10月</li>
  <li>8月</li>
  <li>9月</li>
</ul>

TinySortのページの「sorted numbers」(＝ソートされた数字)項目を参照するに、1桁数字も2桁数字も自然な並びになるように並び替えてくれるようですが、上記「10月」などのように後ろに文字が付くと、0〜9の並びを機械的に判断して並び替えてしまうようです。

これを「8月」「9月」「10月」と並び替えられるようにしたいのですが、どういじったらいいものか見当がつきません。

TinySortのオプションにある「options.natural」(自然なソート順)をtrueにしてみましたが変わりませんでした。またtinysort.charorder.js内にある下記コード部分の一番下の行、ここが並び替えの順序を指定している気がするところで、試しに「0-9」「0-999」などと入れてみましたが全く変わりませんでした。

上記お分かりになる方がいらっしゃいましたらお知恵拝借させていただければと思います。

	var fromCharCode = String.fromCharCode	// minify placeholder
		,mathmn = Math.min					// minify placeholder
		,nll = null							// minify placeholder
		,fnIndexOf = Array.prototype.indexOf// minify placeholder
		,plugin = tinysort.plugin
		,loop = plugin.loop
		//
		,charOrder							// equals the input oSettings.charOrder so we can test any changes
		,allCharsList = (function(a){		// all latin chars 32-255
				// using lowerCase instead of upperCase so _ will sort before
				for (var i=32,s=fromCharCode(i),len=255;i<len;i++,s=fromCharCode(i).toLowerCase()) {
					if (fnIndexOf.call(a,s)===-1) a.push(s);
				}
				return a.sort();
			})([])
		,orderedCharlist					// similar to sAllChars but with the changed char order
		,replacementIndex = 0x2500			// doubles are replaced with Unicode char starting at 0x2500
		,replacements = {}					// replacement object // todo: reset?
		,regexNonLatin = /[^a-zA-Z]/g // ← 並び替え順序を指定していると思われる箇所

Answer 1

optionとしてsortFunctionを指定できるようなので、月を消して数値化して比較するような関数を渡せばできると思います

まず↓でテストしてみてください(chromeでF12を押してconsoleで実行するなど)

const comparer = (a,b) => {
    const numA = Number(a.replace(/[^\d]/g, ''));
    const numB = Number(b.replace(/[^\d]/g, ''));
    return numA - numB;
}
console.log(["2月","10月","9月","8月","12月"].sort(comparer));
console.log(["第2回目","第10回目","第9回目","第8回目","第12回目"].sort(comparer));
console.log(["A2","A10","A9","A8","A12"].sort(comparer));

納得できたら、↓こういう感じに書いてください

tinysort('ul#xcst>li',{sortFunction:function(a,b) {
    const numA = Number(a.replace(/[^\d]/g, ''));
    const numB = Number(b.replace(/[^\d]/g, ''));
    return numA - numB;
}});

---

追加
要件が違うらしいので、とりあえずtinysortにかますまえに、検証用にサンプル関数を書いてみます。

const comparer = (a,b) => {
    const reg = /^([^\d]*)(\d+)(.*)$/;
    const paramA = a.match(reg).slice(1,4);
    const paramB = b.match(reg).slice(1,4);
    console.log(paramA);
    console.log(paramB);

    if(paramA[0] !== paramB[0]) { return stringComparer(paramA[0], paramB[0]); }
    const numA = Number(paramA[1]);
    const numB = Number(paramB[1]);
    if(numA !== numB) { return numA - numB; }
    console.log("2");

    return stringComparer(paramA[2], paramB[2]);;
}
const stringComparer = (a, b) => {
  if (a < b) { return -1; }
  if (a > b) { return 1; }
  return 0;
}
console.log(["2月","10月","9月","8月","12月"].sort(comparer));
console.log(["第2回目","第10回目","第9回目","第8回目","第12回目"].sort(comparer));
console.log(["A2","A10","A9","A8","A12"].sort(comparer));
console.log(["2月","10月","第3回目","ABC999の9", "ABC999の0","BBB31","1月"].sort(comparer));

この例では、AAA999の8とaaa999の7とAAA999の6が大文字小文字を無視して並ぶようにはなりません。いずれにしても明確な仕様を作ってもらわないことにはコードはかけません。
また、関数を使えばこういうことができる、というのが私の回答ですので、どういう関数を作るかは質問者様の仕様と技術でカバーしてください(仕様を提示してこのコード書いてというなら作業委託してください)

Comments

[agepan]

ご回答ありがとうございます。
並び替えようとしているデータというのが特定の文字列ではなく、まったくバラバラな文字列になります。例えば「8月, 9月, 10月」かもしれませんし、「A1, A2, A10」かも、「○○○10回目」といったような文字列も考えられます。

そのため数字の1桁2桁3桁というのをきちっとTinySort側で認識して並び替えてもらう処理が必要になってくると思いますが、これはsortFunctionで賄えそうでしょうか？

[papinianus]

正規表現で数値部分を切り出すとできると思います。特に○○○10回といった中置形式は設定でどうにかなるレベルではないのでなおさら関数を書くしかないです

[papinianus]

数値のブロックが2つにはならないですよね？12A2とかは辛いと思います。

[papinianus]

サンプルコード書きましたんで、試してみてください

[agepan]

お返事遅くなりまして申し訳ございません、テストしてみました。
正しく数字の通りに並び替えができました！

実現させたいことはこれをさらにもう一歩踏み込んだ部分でして、この数字通りの並びをさせることに加えて、かつ50音で並べさせたいというものであります。

例えば以下の配列があったとき、
["2月","10月","第3回目","ABC999の9", "ABC999の0","BBB31","1月"]

このような結果になることが望ましいです。
["1月", "2月","10月", "ABC999の0", "ABC999の9", "BBB31", "第3回目"]

まず50音でソートし、次にそれを今回のコードのように数値でソートさせると良いかと思いましたが、そうすると50音でなくなってしまうので、どうしたら解決できるかなと難儀してるところです。

[papinianus]

・2つの数字ブロックについて
少し前に書いたように数値が2つある場合(ABC999の9、みたいなパターン)では、サンプルで書いたコードは意図した数値にならないと思います。例えば、ABC0の9は10月より前に来ます。BBB1000というものがあったとして、ABC999の9のほうが後にきます。

・望ましい結果
望ましい結果が、言葉で説明するとどういうソートになっているのか、分かりません。個人的には、忖度はできますが、機械は忖度してくれないので、人間系の推測に頼るような並びは仕様にならないのではないかという気がします。
多段階であってもよいので、仕様を言葉で、●なら×みたいな、判定できるルールで宣言してください。
(いちおう今回の例と望ましい結果になるようなものは今から回答に追記しておきます)

[Lhankor_Mhy]

横からすみません。
["ABC99ノ91", "ABC999の1", "ABC9991", "AB999Cの2"]
↑これはどのようにソートしたいですか？

[papinianus]

さすがの例ですけども、そんなん無理やわ、もう回答の範囲越えとるわ…(追記した例では、大文字小文字すら考慮していないというのに…)

上にもかきましたが、regexで[^\d]を消すっていうのは、あくまで例のための、安直なパターンなんで実用には耐えないと思ってます

[Lhankor_Mhy]

ですよね。さすがにこの質問の後出しは、よくないと感じています。

コメントが前後してしまいましたが、先ほどのコメントは質問者に仕様を考えていただくためのものですので、お答えくださいね→質問者様

[papinianus]

コメントに＋したいです！

[Lhankor_Mhy]

そのほか、小数とか指数表現とか16進数とか、考えるべきは色々ありすぎる……

[papinianus]

きびしい ><