Javascriptで数式番号の記載を実装したい

やりたいこと

TeXでいうところの\label,\refみたいな数式番号をJavascriptで実装したい。
今回のサンプルでは、UL要素の入れ子の深さも加味した数式番号にしたい。
ただし、条件として、兄弟要素間では通し番号をキープしておく。”いとこ要素”同士では例え同じ深さでも通し番号はリセットする。です。

現状、ここまで考えました：

数式番号を記載されるべき場所には、span要素を置いておく。
こんな表記で：

(1-2は、深さ1の2番目の数式番号という意味です。)

呼び出す側は、とし、

fukasa2という文字列を手がかりに、それに対応した数式番号をJavaScriptを使って引き出してくる。

数式番号に書くために準備したラベルとそのラベルに対応した数式番号はハッシュで覚えておく。
要素の探索には、jQueryを使いつつ、再帰関数を定義しています。
詳しくはサンプルコードを見て下さい。

問題点･要望

サンプルコードが機能しない。
JavascriptもしくはHTMLで私の要望を満たすようなもっと上手いやり方があれば教えて下さい。

追記
サンプルコードの場合の望むべき結果は、

<li>3 ここからto be removed</li>

と書かれている部分について、

ここからto be removed

と出力されるのではなくて、

ここから(3-1)

と出力されることです。

サンプルコード

Javascript
1<script type="text/javascript">
2	var hash_map_label = {};
3
4	function checkLabelNode(node, depth, num){
5		if(node == undefined){
6			return;
7		}
8		var newDepth = depth;
9		var newNum = num;
10		if(node.prop("tagName") == "UL"){
11			newDepth = newDepth+1;
12		} else if(node.prop("tagName") == "SPAN" && node.attr("class") == "label"){
13			newNum = newNum+1;
14			hash_map_label[node.attr("id")] = "(" + newDepth + "-" + newNum + ")";
15			node.replaceWith("it is ok.");
16		}
17		
18		if(node.children() != undefined){
19			checkLabelNode(node.children().first(), newDepth, newNum);
20		}
21		checkLabelNode(node.next(), newDepth, newNum);
22		
23		return;
24	}
25	$(function(){
26		checkLabelNode($('.functest').first(), 0, 0);
27		$("span.ref").each(function(index){
28			$(this).replaceWith(hash_map_label[$(this).attr("title")]);
29		});
30	});
31</script>
32<div class="functest">
33<ul>
34	<li>1</li>
35	<li>2<span class="label" id="sample" />
36	<ul>
37		<li>1-1<span class="label" id="[1-1]" /></li>
38		<li>1-2<span class="label" id="[1-2]" />
39		<ul>
40			<li>2-1</li>
41			<li>2-2</li>
42			<li>2-3<span class="label" id="fukasa2" /></li>
43		</ul>
44		</li>
45		<li>1-3</li>
46		<li>1-4
47		<ul>
48			<li>2-1<span class="label" id="2番目の深さ1" /></li>
49			<li>2-2</li>
50			<li>2-3<span class="label" id="2番目の深さ2" /></li>
51		</ul>
52		</li>
53	</ul>
54	</li>
55	<li>3 ここから<span class="ref" title="fukasa2">to be removed</span></li>
56</ul>
57</div>

papinianus

2018/10/02 16:34

機能しないということですが、理想系とできれば現状をかいていただけませんか？（現状は実行したらわかりますが…）

行動規範の内容に同意します

回答6件

しっかり自分で考えて悩んでいるみたいだから、面識も無い相手にわざわざ時間を掛けて回答文を作ったにもかかわらず、俺が知っていることが何でお前が知らんのやみたいなエスパーな返答が送られたり、そんなの相手に無駄に労力割かされたり散々な目に会ったのに、設計のまずさを棚にあげつつ自分が思った結果が来なかったからブチ切れる結末で、本当に不毛な質問に出会ってしまったと実感してます。
もっと人生経験つまないかんですよ。対価も出さずに質問して気に入らなかったら暴言吐きまくりって何様よ？

~~プログラマー2年目っていうけど実世界でもこんなことしてたらレビューアから無視されちゃうよ。~~
自分のハテブだけで使うから俺仕様でOKなんだろうけど、そこはそちらが言わないとわかんないでしょ。
数学の[証明]のよう自分が求めたいものを自分一人で答え出せた時は気持ち良いだろうよ。答えが出ない時は自分にムカムカするでしょ？今回自分で答え出せないものを質問しといて、答えが得られなかったのを他人のせいにするのはおかしいですよね？
~~［証明］俺がこの問題を証明できないのは、この問題が悪い~~

ベストアンサーを’授ける’つもりで質問してたの？それなら対価アリできちんと仕事を依頼したほうがいいですよ。

…1文がなげーよ。

投稿2018/10/05 17:10

編集2018/10/06 03:04

oikashinoa

総合スコア2826

批判の意図はないのですが、質問者は望まない回答になると思います。ただ、teratailはQAプラットフォームであり、将来訪問されるかたに、ここにref/labelについて有益な質問・回答がないことを告知するために回答を残します。

回答:

仕様を見直されるべきかと思います。

理由:

以下、texのlabel/refっぽいものがつくりたい、が前提であり目的であると仮定しています。

理想の不整合

ここから(3-1)
と出力されることです。

はおかしいと思います。これがrefであるならlabel側の数値を持ってこないといけない。labelのfukasa2は「やりたいこと」の要件に照らしても"2-2-3"だと考えられる。そこのliにあるものを使うとしても"2-3"。"3-1"にはならない。と思う

idの設計

タグを書く時点でユーザが、深さや番号を指定するというのはおかしい。番号は機械が付与すべき。texのrefやlabelでもそのようなことはしないはず。参照番号の記入は、refは何らかの方法で対応付けられたlabelが所属する文脈に付与される数値を取ってくる、という仕様だと考えられます。
idを人間が指定するのは端的に手間であるのみならず、万一間違った番号が書かれていた場合ulとliの階層から取れる番号を付与するのか、間違っていても書かれた値を採用するのかの迷いを生むだけで、有害無益です。
(texを使っておられるくらいなので、一旦書いたあとにパラグラフを移動させたいことがあることは想像ができると思います。そのときにidを直すのでしょうか？)

liのinner

ここに数値をかくのはおかしいです。前段と同じですが、番号を手で入れるのはおかしい。説明としての仮の値を入れているのだとしたら、もっと誤解をまねかない文字列にしたほうがよいです。

処理の流れ

ノードに番号を付与する(labelの値が決まる)
参照先に番号を付与する(refの数値を埋める)

という異なる2つの動作をする必要があると思います。
labelのidには[1-1]や"2番目の深さの1"などではなく、refで使う名前だけを入れるだけで十分だと思います。

投稿2018/10/04 01:44

編集2018/10/05 09:47

papinianus

総合スコア12705

infologicmation

2018/10/04 13:41

望まない回答になると自覚してるんだったら最初から書かなくて良いです。結論を言うと、全く的外れで何の役にも立ちません。数式番号の付与規則なんて問題にしていませんので、回答するぐらいなら最低限サンプルコードから何が問題になってるかぐらいは読み取って欲しかったですね。数式番号の付与規則を何にしようが私の勝手です。問題としているのは再帰的なDOMの走査(checkLabelNode関数)なんですが、それすら理解できていないなら回答しなくて良いです。

行動規範の内容に同意します

・質問
checkLabelNodeが無限ループになってブラウザがフリーズするが、素人なので問題の特定ができずスタックしている

・回答
jQueryの基本なんですが、メソッドチェーンをする都合上、多くのメソッドがjQueryオブジェクトを返します。!= undefinedをしても、jQueryオブジェクトはundefinedではないから再帰が止まりません。

javascript
1        if(node.children().length > 0){
2            checkLabelNode(node.children().first(), newDepth, newNum);
3        }
4        if(node.next().length > 0) {
5          checkLabelNode(node.next(), newDepth, newNum);
6        }
7        return;
8    }

こうやれば、to be removedのところに(3-3)と表示されます。一旦は3-1と出したいとおっしゃってましたが、番号に何をふるのかは俺の勝手だ、という設計のようなのでこれで。

投稿2018/10/05 09:45

編集2018/10/05 09:45

papinianus

総合スコア12705

papinianus

2018/10/05 10:14 編集

素人さんなのでわからないかもしれませんが、$(document).ready()とかでやらないと、そもそもdomツリーがなくて上手くうごかないかもしれない

think49

2018/10/06 01:17

終わってから指摘するようですが、$(function(){}) 内でコードを実行しているので、$(document).ready() がないのが問題ではなかったと思います。通常は「間違えました、すみません」で終わる話ですが、今回のような質問者にあたると大変そうですね…。お疲れさまでした。

行動規範の内容に同意します

https://lesguillemets.github.io/blog/2014/09/18/katex0.html

javascript でtexの実装があります、これを使ってみては？

投稿2018/10/02 13:34

oikashinoa

総合スコア2826

infologicmation

2018/10/02 14:38

HTML上でTeXを使えるようにするMathJaxは知っていますので、TeXを使わずにプログラミングでの実装を考えています。

oikashinoa

2018/10/02 22:52

知っている、検討済した事項はなるだけ書いた方が良いです。後出ししても良いことは双方無いです。(質問者が少しだけ楽ですが回答遅くなるのがオチです) 最後に。 MathJaxなどを知っているなら、そのソースを参考にされては？中身はきぼうされているjavascript ,html,cssの塊のはずです。頑張ってください。

行動規範の内容に同意します

後学のために逆に質問します。

MathJaxを使わなくなった理由って何でしょうか？
レスポンス？融通が効かない？

投稿2018/10/06 03:03

oikashinoa

総合スコア2826

自己解決

結局自己解決できました。
一応、参考までに私が作ったテストコードを載せておきます。

Javascript
1<script type="text/javascript">
2	var hash_map_label = {};
3
4	function checkLabelNode(node, depth, num){
5		var newDepth = depth;
6		var newNum = num;
7		if(node.is('ul')){
8			newDepth = newDepth+1;
9			newNum = 0;
10		} else if(node.is('span.label')){
11			newNum++;
12			var str = "(" + newDepth + "-" + newNum + ")";
13			hash_map_label[node.attr("id")] = str;
14			node.text(str);
15		}
16		if(node.children()[0]){
17			newNum = checkLabelNode(node.children().first(), newDepth, newNum);
18		}
19		if(node.next().length){
20			checkLabelNode(node.next(), newDepth, newNum);
21		}
22		
23		return newNum;
24	}
25	$(function(){
26		checkLabelNode($('.functest').first(), 0, 0);
27		$('span.ref').each(function(index){
28			$(this).text(hash_map_label[$(this).text()]);
29		});
30	});
31</script>
32<div class="functest">
33<ul>
34	<li>1</li>
35	<li>2<span class="label" id="sample" />
36	<ul>
37		<li>1-1<span class="label" id="1-1" /></li>
38		<li>1-2<span class="label" id="1-2" />
39		<ul>
40			<li>2-1</li>
41			<li>2-2</li>
42			<li>2-3<span class="label" id="fukasa2" /></li>
43		</ul>
44		</li>
45		<li>1-3<span class="label" id="1-3" /></li>
46		<li>1-4
47		<ul>
48			<li>2-1<span class="label" id="2番目の深さ1" /></li>
49			<li>2-2</li>
50			<li>2-3<span class="label" id="2番目の深さ2" /></li>
51		</ul>
52		</li>
53	</ul>
54	</li>
55	<li>2の所を引用：<span class="ref">sample</span></li>
56	<li>2の1-1の所を引用：<span class="ref">1-1</span></li>
57	<li>2の1-2の所を引用：<span class="ref">1-2</span></li>
58	<li>2の1-3の所を引用：<span class="ref">1-3</span></li>
59	<li>2の1-2の2-3の所を引用：<span class="ref">fukasa2</span></li>
60	<li>2の1-4の2-1の所を引用：<span class="ref">2番目の深さ1</span></li>
61	<li>2の1-4の2-3の所を引用：<span class="ref">2番目の深さ2</span></li>
62</ul>
63</div>

このサイトなら良い指針やアドバイスが得られると思って、わざわざ時間を掛けて質問文を作ったにもかかわらず、アスペみたいな見当違いの的外れの回答が送られたり、そんなのの相手に無駄に労力割かされたり散々な目に会ったのに、結局は自力で解決するという結末で、本当に不毛なことをさせられたと実感してます。
teratailはもっと経験豊かな人が居るんじゃないんですか？どうなってんの？178viewもありながら(確認時点で)…

当然、ベストレビュアーは無しとします。

投稿2018/10/05 15:17

infologicmation

総合スコア49