memo.xight.org

日々のメモ

JavaScript でインクリメンタル grep 検索

Posted on | Tagged :

Summary

  JavaScriptでinput要素のonkeyup属性を利用してインクリメンタル grep 検索を実現．

検索対象とする各行を <span class="line">...</span> で囲っておいて，
pattern にマッチした以外の行を非表示にするという手法を取っている


JavaScriptのソース (元ソース)

function grep (pattern) {
	try {
		regex = new RegExp(pattern, "i");
		spans = document.getElementsByTagName('span');
		for (i = 0; i < spans.length; i++) {
			e = spans[i];
			if (e.className == "line" && e.innerHTML.match(regex)) {
				e.style.display = "inline";
			} else {
				e.style.display = "none";
			}
		}
	} catch (e) {
		// 正規表現の文法エラーを無視する
	}
}


HTMLのソース - インクリメンタル grep 検索 (元ソース)

<form>
<input type="text" name="pattern" onkeyup="grep(this.value)">
</form>


HTMLのソース - grep 検索 (元ソース)

<form onsubmit="grep(this.pattern.value); return false;">
<input type="text" name="pattern">
</form>

Reference

  いやなブログ - 2004-11-04
  http://namazu.org/~satoru/blog/archives/000008.html

via

  読書記録ChangeLog - 2004-11-04
  http://dkiroku.com/2004-11-04.html#2004-11-04-15