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.<a class=" tooltip"="">kip<span class="classic">chicken</span></a>.com">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」が無視されるため、既存の正規表現に従って、単語全体のスワッピングのみが必要です。ただし、「パイチキン」は交換されます。この行は、既存のコードで正しく処理されます。
私は文字通り、既存のコードに「コードを置き換えず、アンカーの開始タグ内にある場合は置き換えない」という追加のルールを追加しようとしています。