memo.xight.org

Home > Changelogメモ > 2004-10 > 2004-10-30 > JavaScript で複数箇所のキーワードをハイライト

2008 : 01 02 03 04 05 06 07 08 09 10 11 12
2007 : 01 02 03 04 05 06 07 08 09 10 11 12
2006 : 01 02 03 04 05 06 07 08 09 10 11 12
2005 : 01 02 03 04 05 06 07 08 09 10 11 12
2004 : 01 02 03 04 05 06 07 08 09 10 11 12
2003 : 01 02 03 04 05 06 07 08 09 10 11 12
2002 : 01 02 03 04 05 06 07 08 09 10 11 12

2004-10-30

JavaScript で複数箇所のキーワードをハイライト

- Summary
  キーワードにマウスカーソルを載せると，複数箇所に出現するキーワードが一斉にハイライトされる
  大きなページで反応が鈍くなるらしく，途中の処理をキャッシュすることで軽減させている．
  これはおもしろい．

- JavaScriptのソース (元ソース)

highlightColor = "yellow";
backgroundColor = "white";
 
var cache;
function initCache () {
	cache = new Array();
	spans = document.getElementsByTagName('span');
	for (i = 0; i < spans.length; i++) {
		name = spans[i].className;
		if (!cache[name]) {
			cache[name] = new Array();
		}
		cache[name].push(spans[i]);
	}
}
 
function hlclass (name, flag) {
	if (!cache) {
		initCache();
	}
	for (i = 0; i < cache[name].length; i++) {
		cache[name][i].style.backgroundColor = (flag ? highlightColor : backgroundColor);
	}
	return true;
}

- HTMLのサンプル (元ソース)

<span class="x" onmouseover="hlclass('x', 1)" onmouseout="hlclass('x', 0)">x</span>
<span class="x" onmouseover="hlclass('x', 1)" onmouseout="hlclass('x', 0)">x</span>
<span class="y" onmouseover="hlclass('y', 1)" onmouseout="hlclass('y', 0)">y</span>
<span class="y" onmouseover="hlclass('y', 1)" onmouseout="hlclass('y', 0)">y</span>