0

ユーザーが選択したテキストにクラスを適用できるようにする、rangy を使用した次のコードがあります。

<div><span>This is some text that users can select</span></div>

ユーザーがテキストを選択してクラスを適用すると、コードは次のようになります。

 <div><span>This is some <span class='someclass'>text</span> users can select</span</div>

最初に前のスパンタグを終了してから、新しいスパンタグを作成する方法が必要です:

<div><span>This is some </span><span class='someclass'>text</span><span> users can select</span</div>

rangy ライブラリには、これを行う方法が組み込まれていません。私は使用してみました：

$('.someclass').before("</span>")

と

$('.someclass').after("<span>")

しかし、それはうまくいきませんでした。

何か案は？

4

3 に答える 3

3

最速の方法は、span クラスの挿入を処理するコードを次のように変更することです。

選択前に挿入

</span><span class='someclass'>

そして選抜後

</span><span>

レンジとサラウンドコンテンツで遊ぶ:

var spanparent = $('div > span').get(0);
var range = document.createRange();

// create <span>This is some </span>
var startSpan = document.createElement("span");
range.setStart(spanparent,0);
range.setEnd(spanparent,1);
range.surroundContents(startSpan);

// create <span> users can select</span>
var endSpan = document.createElement("span");
range.setStart(spanparent,2);
range.setEnd(spanparent,3);
range.surroundContents(endSpan);

//result:
//<div>
//  <span>
//      <span>This is some </span>
//      <span class="someclass">text</span>
//      <span> users can select</span>
//  </span>
//</div>

// remove the outer span
var contents = $(spanparent).html();
$(spanparent).replaceWith(contents);
于 2013-06-25T14:27:34.230 に答える
1

このようなことができます

$('.someclass').parent().each(function(){
    $(this).contents().each(function(){
        if(this.nodeType == 3){
            $(this).wrap('<span />')
        }
    });
    $(this).contents().unwrap()
})

デモ:フィドル

于 2013-06-26T03:52:09.810 に答える