document.body.innerHTML.replaceでハイライトさせた文字を戻す方法

質問

document.body.innerHTML=document.body.innerHTML.replace(/検索した文字/g,'<span style=background-color:yellow>検索した文字</span>');focus();
で検索文字を黄色くさせたあと、更新させない限り元に戻りません。これでは、他の文字を検索したときに、前に検索した文字が黄色くなりっぱなしで、不便です。どうしたらよいでしょうか？

回答No.4

fujillin

またまた、#1、3です。

ちょっと気になってきたのですが、検索する文字列にメタキャラが入っている可能性を考慮して、replaceを実行する前には当然エスケープ処理などをしていますよね？

処理してないと、「分子/分母」とか「(株)○○会社」みたいな文字列を検索しようとしてもうまくいかないはずなので…

お礼

お返事ありがとうございます。色々と参考にさせていただきました。

回答No.3

fujillin

#1です。

background-colorをクラス指定にしておいて、
　replace(/検索値/g,'<span class="marker">検索値</span>');
で変換したものを
　replace(/<span class="marker">検索値<\/span>/g,'検索値');
で戻すようなことをイメージしていましたが、ブラウザがそのままには解釈してくれない様で、innerHTMLで返される内容はブラウザによっても違ったものが返ってくるみたいですね。
とりあえず、
　replace(/<span class="?marker"?>検索値<\/span>/ig,'検索値');
みたいなことで、できないことはなさそうだけれど、だいぶ厳密性を損ねてしまいます。

きちんとやろうとするとDOMで順に処理していくことになってしまいますが、そんなことをしているよりも、#2様のアイデアの方がはるかに簡単でかつ確実でしたね。（アホな私は気づきませんでした。）
参照する文字列を、いつも最初に控えておいたものにするようにしておけば、元に戻す処理そのものも不要になります。

回答No.2

Gotthold

最初に、document.body.innerHTMLを適当な変数に代入しておけば、
いつでも元のinnerHTMLが使えます。

回答No.1

fujillin

挿入する<span>に特定のname属性（他の識別子でもよい）などを設定するようにしておいて、次の検索を行った際に、最初に元に戻すようにしてあげればよいのでは？

方法としては、そのname属性（などで識別できる）の<span>のbackground-color属性を""に設定しなおすとか、あるいは元通りになるように<span>タグを削除するとか？
2回目の検索の時に、<span>タグで分断されたものを検索するような文字列が入力される可能性を考えると、元に戻しておく方がよさそうですね。

関係ないけれど、色をつける方法として、background-colorを各要素に設定してゆくのではなくて、CSSを用意しておいて、各項目にはclass設定で行うという方法もありそうですね。

今のままなら、具体的な処理としては、設定する時と同様に文字列操作で行うか、あるいはdocument.getElementsByName()などで要素を探してDOM操作で元に戻すなどでしょうか。
いずれにしろ、識別子となるものは通常現れにくいものにしておいて、偶然のバッティングを避けるようにしておいたほうが宜しいかと…

補足

お返事ありがとうございます。それでなのですが、設定する時と同様に文字列操作で行うとありますが、その方法がよくわかりません。どういったコードを組めばいいでしょうか？