0

JavaScript または JQuery を使用して、ユーザーが選択した範囲から HTML を取得、変更、および置換する方法を探しています。基本的に、ユーザーがいくつかの HTML タグにまたがる範囲を選択したとします ( | は選択範囲を示します)。

<p>This is an <b>example |of</b> some text| to be selected</p>

どうすれば入手できますか：

of</b> some text

さらに、いくつかのコードを実行してそのテキストを変更した後:

of some</b> altered text

最終バージョンが次のようになるように、どのようにプラグインしますか。

<p>This is an <b>example of some</b> altered text to be selected</p>

範囲の正確なhtmlを見つけたり、特定の変更されたHTMLを範囲に書き込んだりして、どちらの問題も解決できませんでした。

4

4 に答える 4

0

これが私のスタートです：

jsFiddle

選択したテキストを入力の値に置き換えます。

ただし、htmlは考慮されていません。

それについて何か考えはありますか？

$('#content').on('mouseup',function() {

    var t = false;

    if (window.getSelection) {
        t = window.getSelection();
    } else if (document.getSelection) {
        t = document.getSelection();
    } else if (document.selection) {
        t = document.selection.createRange().text;
    }

    if (t && (t+'').length > 0) {

       $('#content').html($('#content').html().replace(t,$('input').val()))

        alert("You replaced:\n" + t + "\nwith:\n" + $('input').val());
    }

});​
于 2012-04-10T21:09:17.213 に答える
0

私はあなたのテキスト選択のアイデアから逸脱し、マウスオーバーとハイライトベースのソリューションを実行しました。正確な要件ではありませんが、基本的な目標を達成します。改善の余地がたくさんあります。

例：jsFiddle

JS

var $txtArea = $('textarea'); 

function Rebind(){
    $('#editable *').off('mouseover.editor').on('mouseover.editor',function() {
        $(this).addClass('highlight');
        return false; 
    }).off('mouseout.editor').on('mouseout.editor',function() {
        $(this).removeClass('highlight');
        return false; 
    }).off('click.editor').on('click.editor',function() {
        var $sel = $('.highlight'); 
        $txtArea.val($sel.html()).data('selected', $sel);
    });
}
Rebind();
$('input').click(function(){
    $txtArea.data('selected').html($txtArea.val()); 
    Rebind();
}); 
​

注：何らかの理由でjQueryonが新しい要素を取得していなかったため、編集後にそれらを再バインドする必要がありました。

HTML

<div id='editable'>
    <div>
        This is <br /> some <b>content</b>
        <div>testing</div>
        <div> 
            some <i>more content</i>
            <div>eidt me</div>
        </div>
    </div>
</div>

<textarea ></textarea>
<input type="button" value="save" /> ​

CSS

textarea{
 height:150px;
 width:100%;    
}

.highlight
{
    border:1px solid blue !important;
}
于 2012-04-11T15:59:58.527 に答える
-1

これを達成する1つの方法は次のようになると思います。

  1. 選択全体を含むDOMの最上位の要素を取得します
  2. 選択のためにinnerHTMLを解析します（正規表現は使用しないでください）
  3. 一致を表示し、その位置と編集されたバージョンを挿入し直すための要素を覚えておいてください

ステップ3は、実際にレイアウトを変更するためには機能しない可能性がありますが。うまくいけば、もっと簡単な解決策があるはずです。

于 2012-04-10T20:50:58.400 に答える
-1

例でわかるように、iambriansreed のバージョンと同様に、HTML を考慮していません。

jsフィドル

重要なコードは次のとおりです。

var s = window.getSelection();
var ss = s.toString();
var node = $(s.getRangeAt(0).startContainer).parent();
var contents = node.text();
var idx = contents.indexOf( ss );
node.html( contents.substr( 0, idx ) + 
    "HELLO" + 
    contents.substr( idx+ss.length ) );
于 2012-04-10T21:16:19.660 に答える