jquery mouseup selection wrodsのhtmlタグをラップする方法は？

私はここで答えを参照していますSelect whole word with getSelection。 mouseupの選択completed wordsをbodyにしたいと思います。 selection wordsの場合は<p>タグをラップします。ここにコードがあります。だからどのように？ありがとう。jquery mouseup selection wrodsのhtmlタグをラップする方法は？

<script src="jquery.js"></script> 
<script> 
(function($) { 
function getSelected() { 
    if(window.getSelection) { return window.getSelection(); } 
    else if(document.getSelection) { return document.getSelection(); } 
    else { 
    var selection = document.selection && document.selection.createRange(); 
    if(selection.text) { return selection.text; } 
    return false; 
    } 
    return false; 
} 

function expand(range) { 
    if (range.collapsed) { 
     return; 
    } 

    while (range.toString()[0].match(/\w/)) { 
     range.setStart(range.startContainer, range.startOffset - 1); 
    } 

    while (range.toString()[range.toString().length - 1].match(/\w/)) { 
     range.setEnd(range.endContainer, range.endOffset + 1); 
    } 
} 

$(document).ready(function() { 
    $('body').mouseup(function() { 
    var selectionRange = getSelected().getRangeAt(0); 
    var start = selectionRange.startOffset; 
    expand(selectionRange); 
    var selection = selectionRange.toString(); 
    if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) { 
     //how to wrap <p> tag for the selection words? 
    } 
    }); 
}); 
})(jQuery); 
</script> 
<style> 
p {color:blue; } 
</style> 
<body> 
Facebook needs to scrape your page to know how to display it around the site. 

Facebook scrapes your page every 24 hours to ensure the properties are up to date. The page is also scraped when an admin for the Open Graph page clicks the Like button and when the URL is entered into the Facebook URL Linter. Facebook observes cache headers on your URLs - it will look at "Expires" and "Cache-Control" in order of preference. However, even if you specify a longer time, Facebook will scrape your page every 24 hours. 

The user agent of the scraper is: "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)" 
</body>

UPDATE：

var new_html = $('body').html().split(selection, 1)[0] + '<p>' + selection + '</p>' + $('body').html().split(selection, 2)[1]; 
$('body').html(new_html);

出典

2011-10-18 Giberno

はこれを試してみてください：

(function($) { 
function getSelected() { 
    if(window.getSelection) { return window.getSelection(); } 
    else if(document.getSelection) { return document.getSelection(); } 
    else { 
    var selection = document.selection && document.selection.createRange(); 
    if(selection.text) { return selection.text; } 
    return false; 
    } 
    return false; 
} 

function expand(range) { 
    if (range.collapsed) { 
     return; 
    } 

    while (range.toString()[0].match(/\w/)) { 
     range.setStart(range.startContainer, range.startOffset - 1); 
    } 

    while (range.toString()[range.toString().length - 1].match(/\w/)) { 
     range.setEnd(range.endContainer, range.endOffset + 1); 
    } 
} 

$(document).ready(function() { 
    $('body').mouseup(function() { 
    var selectionRange = getSelected().getRangeAt(0); 
    var start = selectionRange.startOffset; 
    expand(selectionRange); 
    var selection = selectionRange.toString(); 
    if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) { 
     var el = $('body'); 
     el.html(el.html().replace(selection, "<p>"+selection+"</p>")); } 
    }); 
}); 
})(jQuery);

http://jsfiddle.net/CHhJG/

出典

2011-10-18 07:02:06

おかげで、私が必要と正常に動作します。 – Giberno

@Giberno：本当ですか？全身の 'innerHTML'における文字列置換は、これを行うためのひどい方法です。選択範囲が要素境界を越えても、ボディの既存の要素をすべて置き換えて既存のイベントハンドラを失う場合でも、有効なHTMLを生成するとは限りませんし、処理が遅くなります。 –

@Tim Down、em ...この問題をチェックするのは不注意です。これは、選択単語ではなく、全身の最初の単語を置き換えます。私はstackoverflowで 'word selection questions'を検索します。あなたはこのセクションの専門家です。あなたは正しいアンサーをする良いアイディアを持っていますか？どうもありがとう。 – Giberno

jquery mouseup selection wrodsのhtmlタグをラップする方法は？

答えて

関連する問題