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에서 '단어 선택 질문'을 검색합니다.이 섹션의 전문가입니다. 그렇다면 올바른 anwser를 수행하는 데 좋은 아이디어가 있습니까? 많은 감사. – Giberno

jquery mouseup selection wrods에 대한 html 태그를 래핑하는 방법은 무엇입니까?

답변

관련 문제