【JavaScript】注釈・脚注を補完する「AutocompleteAnnotations」

注釈・脚注を補完するスクリプト「AutocompleteAnnotations」を書いた。

ブログを書いていると【1】のように注釈や脚注を付けたい時がある。しかし、一々ハッシュリンク貼ったりa要素のtitle属性に内容を書いたりするのは面倒くさいので自動化する。以下サンプル

//脚注同士のリンクや説明を自動補完;
(function autocompleteAnnotations() {

	var range = document.createRange();

	//注釈側の処理;
	(function() {
		//注釈はannotationsというclass属性を持っている;
		var annotations = document.getElementsByClassName('annotations');
		var modelA = document.createElement('a');
		modelA.id = 'annotation';
		modelA.href = '#footnote';
		for(var i = 0; i < annotations.length; i++) {
			var a = modelA.cloneNode(true);
			a.id += i;
			a.href += i;
			//注釈文字をa要素で囲む;
			range.selectNodeContents(annotations[i]);
			range.surroundContents(a);
		}
	})();

	//脚注側の処理;
	(function() {
		//脚注はfootnotesというclass属性を持っている;
		var footnotes = document.getElementsByClassName('footnotes');
		var modelA = document.createElement('a');
		modelA.id = 'footnote';
		modelA.href = '#annotation';
		for(var i = 0; i < footnotes.length; i++) {
			//脚注を指している注釈側のtitle属性に同じ説明を加える;
			var annotation = document.getElementById('annotation' + i);
			annotation.title = footnotes[i].textContent;
			var a = modelA.cloneNode(true);
			a.id += i;
			a.href += i;
			a.textContent = annotation.textContent;
			range.setStart(footnotes[i], 0);
			range.insertNode(document.createTextNode(': '));
			range.insertNode(a);
		}
	})();

	range.detach();
})();

See the Pen AutocompleteAnnotations by shigure (@webkatu) on CodePen.

使い方

「autocompleteAnnotations.js」をdefer属性をつけて呼び出し、注釈部分の要素に「class=”annotations”」という属性をつけて、説明部分の要素に「class=”footnotes”」という属性をつければOK。

<head>
	<!-- defer属性をつけてscriptを呼び出す -->
	<script defer src="autocompleteAnnotations.js"></script>
</head>
<body>
	<!-- 注釈部分を"annotations"というclass名の要素で囲む -->
	<p>hogehoge<span class="annotations">【1】</span></p>
	<p>fugafuga</p>
	<!-- 説明部分(脚注)を"footnotes"というクラス名の要素で囲む -->
	<p class="footnotes">piyopiyo</p>
</body>
<head>
	<script defer src="autocompleteAnnotations.js"></script>
</head>
<body>
	<p>hogehoge<span class="annotations"><a id="annotation0" href="#footnote0" title="piyopiyo">【1】</a></span></p>
	<p>fugafuga</p>
	<p class="footnotes"><a id="footnote0" href="#annotation0">【1】</a>: piyopiyo</p>
</body>

GitHub

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です