4

検索/置換を行う必要がある tinymce ベースのドキュメントがあります。

<!--nextpage-->ドキュメント内のマークアップには、次のように html 内に特定のコメント タグが含まれます。

<p>some content</p><!--nextpage-->
<p>some more content</p><!--nextpage-->

<!--nextpage-->マークアップ内の の各出現を反復処理し、それをアンカー要素に 置き換えるスクリプト化された検索/置換を実行する必要があります。

Nアンカーには、ドキュメント内のアンカーのインデックスに 1 を加えた"anchor+N" という連続した id 値が必要です。

したがって、上記のテキストを置き換えると、次のようになります。

<p>some content</p><a id="anchor1"></a>
<p>some more content</p><a id="anchor2"></a>

jQueryでこれを行うことができますか、それとも正規表現のようなものを使用する必要がありますか?

4

1 に答える 1

4

の を取得し、innerHTMLそれbodyを置換して、完了後に新しいテキストを書き戻すことができます。

デモ - 1 - JavaScript を使用して HTML を置き換える

コードは機能しますが、HTML を置き換えると結果が生じる可能性があります。内のいずれかの要素にバインドされたイベントがある場合body、HTML を置き換えたので、バインドが解除されます。

可能であれば、影響がある場合は<!--nextpage-->プレースホルダーとして使用しませんが、セレクターでターゲットにできる空の要素<div class="nextpage-placeholder"></div>、たとえば次のようなものかもしれません。

そうすれば、コードの残りの部分に影響を与えることなく、特定の要素のみをターゲットにして置き換えることができます。

DEMO - 2 - jQuery を使用して要素を置き換える

別の方法は、クラスを実際のタグに割り当て、pjQuery を使用afterしてアンカーを追加することです。

デモ - 3 - jQuery を使用して新しいアンカーを追加する

フィドルが機能しなくなった場合の DEMO からのコード

デモ - 1

<p>some content</p><!--nextpage-->
<p>some more content</p><!--nextpage-->

var text = document.body.innerHTML;
var targetText = "<!--nextpage-->";
var index = 1;

while(text.indexOf(targetText) > -1){
    text = text.replace(targetText, '<a id="anchor' + index + '"></a>');
    index++;
}

document.body.innerHTML = text;

デモ - 2

<p>some content</p><div class="nextpage-placeholder"></div>
<p>some more content</p><div class="nextpage-placeholder"></div>

var $elements = $(".nextpage-placeholder");

$elements.each(function(index){
    $(this).replaceWith('<a id="anchor' + (index+1) + '"></a>')
});

デモ - 3

<p class="nextpage-placeholder">some content</p>
<p class="nextpage-placeholder">some more content</p>

var $elements = $(".nextpage-placeholder");

$elements.each(function(index){
    $(this).after('<a id="anchor' + (index+1) + '"></a>')
});
于 2013-01-23T23:09:15.627 に答える