JavaScript連載第8回

これでできる！ クロスブラウザJavaScript入門の第8回は実践DOMスクリプティング#1　HTMLとテキストの操作です。
今回は今までより少し掘り下げていて、最適化とかにも少し触れています。これぐらいのほうが面白みがあって良いのかなとも思う一方、「クロスブラウザって面倒」な印象を与えてしまいかねないので難しいところです。今回の反応をみて微調整したいと思います。

記事の前半はdocument.writeに関連して非同期読み込みとかの話。直接は言及してませんが、Google Analyticsのコードがどうしてああなっているのかが大体わかるようになっていると思います。関連：t32k.com

後半はテキストをハイライトしたりするコードのサンプルです。プレーンなテキスト中の特定のワードを別のワードに置き換えたり、ハイライトしたり、リンクにしたり、といったことは結構需要としてあるけど、実際にやろうとすると結構難しいんですよね。
IE独自のメソッドで高速化とか、クロスブラウザな連載らしいといえばらしいですが…。createTextRangeは958さんがgistに貼ってたコードから。

ハイライトといえば、はてなスターの引用時にもハイライトされますね。はてなスターの場合、マウスオーバーでハイライトを切り替えるので、頻繁にハイライトしたりしなかったりを繰り返さないといけないという仕様です。そのため、ロード後に全テキストを集めておいて、全テキストから単語を(高速な)indexOfで検索、マッチした位置からどのテキストノードかわかるようにしてある、というかなり凝ったことをしています。関連:もう結構前のだけど、ほとんど変わってないIEでのテキストノード走査の高速化 - 0xFF

そうそう、前回の記事でSafari、ChromeがattachEventをサポートしていると書いてしまったのですが、これは全くの間違いでした(記事も修正済み)。attachEventをサポートしているのはIEとOperaだけです。なんで間違えたのかはよくわかりません…。気をつけます。そして、指摘してくださったえむけいさんありがとうございました。