読者です 読者をやめる 読者になる 読者になる

もんたプラグイン

もんたメソッドを実現する jQuery プラグインを作ってみました!

JavaScriptjQuery の勉強も兼ねて。
JRuby の勉強は、愛機 VAIO type T をリカバリしてしまい、環境がきれいさっぱり無くなったので、また今度。
作成した jQuery プラグインがこちら。

// もんたプラグイン
$.fn.monta = function(text) {
    return this.each(function() {
        // 置換後の文字列を作成
        var eventHandlerText = "this.style.backgroundColor='transparent'";
        var styleText = "background-color:#000;color:#000;";
        var wrapText = '<span title="Click!" style="'
            + styleText
            + '" onclick="'
            + eventHandlerText
            + '">'
            + text
            + '</span>';

        var pattern = new RegExp(text, "gi");
        this.innerHTML = this.innerHTML.replace(pattern, wrapText);
    });
};

文字列を置換しているだけです。
Firefox と IE で replace メソッドの挙動が違っていたため、思いのほか時間がかかってしまいました。最初は replace に text をそのまま渡していたので、IE だと最初に該当した文字列しか置換されない…。

使い方はこんな感じです

$("body").monta("Hoge");

隠したい文字列を引数で指定します。

ご自由にお使い下さい

といっても、大したものじゃありませんが…(;^_^A
改変も自由です。
アドバイスがあればよろしくお願いしますm(_ _)m