jquery - jQuery - リンク内の部分的なテキストを置き換える

Question

リンクの最初の 5 文字に含まれるそのページのすべてのリンクの最初の 5 文字を、テキスト#OFN#を置き換える画像に置き換えよ#OFN#うとしていますが、残りのリンク テキストは保持したいと考えています。

今まで使っていたのはこちら...

$(document).ready(function() {
    $("a:contains('#OFN#')").each(function() {
        var calSubject = $(this).text().substring(5);
        $(this).replaceWith("<img src='/images/ofn_bullet.gif' width='10' height='10' style='width: 10px; height: 10px; border: none;' />" + calSubject);
    });
});

しかし、このアプローチは<a> tagテキストから完全に削除します。削除せずにこれを行うにはどうすればよいですか<a> tags

リンクの HTML の例を次に示します。

<a href="#" onclick="eventDisplay('980','4/18/2013')">#OFN# 2013 Midwest Regional Meeting</a>

使用してみ.children()ましたが、それもうまくいかないようです。ここで何が間違っていますか？

Answer 1

htmlの代わりに使用しreplaceWithます。このフィドルをチェックしてください：

http://jsfiddle.net/lbstr/MPTp7/

replaceWith呼び出された要素を置き換えます。これにより、説明した動作が説明されます。を使用すると、アンカー タグ内$.fn.htmlのすべてが置き換えられます。

Answer 2

メソッドを使用してhtml、コードを置き換えるのではなく、リンク内に配置します。

$(this).html("<img src='/images/ofn_bullet.gif' width='10' height='10' style='width: 10px; height: 10px; border: none;' />" + calSubject);

Answer 3

テキスト ノードを選択し、代わりに更新します。jsFiddle Demo

$(document).ready(function() {
    $("a:contains('#OFN#')").contents().each(function(){
        // skip if not a text node
        if (this.nodeType != 3) {
            return true;
        }
        this.nodeValue = this.nodeValue.substr(5);
        $(this).before("<img src='/images/ofn_bullet.gif' width='10' height='10' style='width: 10px; height: 10px; border: none;' />");
    });
});

Answer 4

私はもう少し冗長なことをします：

var regex = /^#0FN#/;
$("a").each(function() {
    var $this = $(this), html = $this.html();
    if (regex.test(html)) {
        html.replace(/#0FN#/, "image stuff");
        $this.html(html);
    }
});