1

1 つの単語を別の単語に置き換える単純なブラウザ プラグインに取り組んでいますが、小さなツールチップ/ポップアップ用のアンカーを追加しています。私はこれを実際にすでに機能させていますが、私の問題は、置き換えられる単語がすでにアンカー内にある場合、</a>すでに開いているものを閉じること<a>です。

したがって、開いているアンカータグ内にない限り、単語のみを置き換える方法について助けが必要です。これに続いて、対象の単語が<input>やその他の不適切なタグに含まれていないことも確認します。

私のコードは次のとおりです。

var regex = new RegExp("\\b" + nativeWord + "\\b", "igm");
var body = $('body');

body.each(function() {
    $(this).html(
        $(this).html().replace(regex, function() {
            counter++;
            if(counter > wordSwapLimit) {
                return nativeWord;
            } else {
                return "<a class=\"tooltip\" href=\"#\">" + studyWord + "<span class=\"classic\">" + nativeWord + "</span></a>";            
            }
        })
    );
});

もっと複雑な RegExp を書く必要があるかもしれないと思っていますが、これは私の最初の外出なので、どんな提案も大歓迎です!

更新 だから、コードがどのように機能するかを確認するために使用するテストページがあります。これは、ページの元の HTML の一部です。

<p id="changeArea"> I <a href="http://www.chicken.com">love chicken but I hate</a> beef. </p>

しかし、上記のコードで「chicken」を「kip」に置き換えると、次のように変更されます。

<p id="changeArea"> I <a href="http://www.&lt;a class=" tooltip"="">kip<span class="classic">chicken</span></a>.com"&gt;love <a class="tooltip" href="#">kip<span class="classic">chicken</span></a> but I hate beef. </p>

スワップするものの周りにアンカーがない場合、それは完全に機能し、素敵なロールオーバー ツールチップが表示されます。

ご協力いただきありがとうございます。

更新 2 要求に応じて、「chicken」を「kip」に交換するときにプラグインが遭遇する可能性のある「未処理」の例を次に示します。

<p id="changeArea"> I <a href="http://www.chicken.com">love chicken but I hate</a> beef. </p>
<p id="changeArea2"> Chickenpie? pie-chicken. </p>

私が望んでいることは次のとおりです。

<p id="changeArea"> I <a href="http://www.chicken.com">love chicken but I hate</a> beef. </p>
<p id="changeArea2"> Chickenpie? pie-<a class="tooltip" href="#">kip<span class="classic">chicken</span></a>. </p>

最初の行でわかるように、html コードは単語のテキストと同様にそのまま残されています。これは、URL 内にあり、ツールチップ アンカーを挿入すると壊れてしまうためです。2 行目では「chickenpie」が無視されるため、既存の正規表現に従って、単語全体のスワッピングのみが必要です。ただし、「パイチキン」は交換されます。この行は、既存のコードで正しく処理されます。

私は文字通り、既存のコードに「コードを置き換えず、アンカーの開始タグ内にある場合は置き換えない」という追加のルールを追加しようとしています。

4

1 に答える 1