如何在選擇之前，之內和之后獲取HTML（不在textarea中）？

Question

以下是我要完成的任務：當用戶使用鼠標，鍵盤或觸摸來選擇“myDiv”中的文本時，我想獲取三個謹慎的HTML塊：選擇之前的HTML（到它的“左側”）），選擇內的HTML，以及選擇后的HTML（到它的“右邊”）。 html應該與myDiv.innerHTML一樣。

選擇可能在標記對內開始或結束（即，隔離的選擇不一定是有效的HTML）。 我不需要處理選擇中絕對定位元素之類的特殊場景; 我所關注的所有選擇都將被限制為一個包含基本標簽的div，例如strong，em，ul，ol，h1，image和table。

我最接近的是使用rangy來阻止選擇並調用selection.getRangeAt(0).cloneContents()來獲取選擇HTML。 這種方法效果很好，直到我做出一個孤立無效的選擇，並且瀏覽器改變文檔片段的HTML以使其成為有效標記。

額外信息：這就是我需要這個的原因：

我正在創建一個文檔反饋系統，因此我需要將選擇信息保存到數據庫中以便以后檢索和重構。 通常我會使用DOM路徑和所選文本保存選擇，但文本可能會在保存和重建之間發生變化。 例如，作者可能會移動整個段落，刪除部分等。然后DOM路徑變得毫無用處。

所以我的（不完美）計划是將選擇存儲為[offset，length，html_snippet]。 那就是“位置”。 我還將存儲直接在所選文本之前和之后出現的html片段。 這是“背景”。

使用這些數據的組合，我應該能夠在大多數時間重新定位最初選擇的文本，即使它已移動或部分更改。 當失敗時，UI將有辦法解決它，但我希望盡可能不頻繁地發生。

Superthanks！

Answer 1

我有幾個問題：

1.-當你說'選擇后的html'時 - 那個html與選擇之前的html有什么不同，反之亦然？ 由於你的“腳本”或其他什么，“選擇”過程本身是否篡改了html？

2.-你說文本選擇不是在textareas中發生的......那你使用的是什么元素？ 段落？ div的...？ 縮小它會有所幫助。

3.-你有沒有想過使用jquery？

http://api.jquery.com/select/

做點什么

$('#element_with_text_goes_here').select(function() {

//apply grabbing functions here, for example

//copy html 'before' selection:
     $pre_html = $('html').clone();

   // copy selection...see below:

   // copy html 'after' selection'...same as before


});

復制選擇：

如上所述：

選擇元素中的文本（類似於用鼠標突出顯示）

傑森寫了以下函數：

function selectText(element) {
    var doc = document;
    var text = doc.getElementById(element);    

    if (doc.body.createTextRange) { // ms
        var range = doc.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) { // moz, opera, webkit
        var selection = window.getSelection();            
        var range = doc.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

通過現場工作演示可以在這里找到： http ： //jsfiddle.net/edelman/KcX6A/339/

這里有一個jquery插件版本： http ： //jsfiddle.net/edelman/KcX6A/340/

您可以使用哪個來獲取所選文本。 你只需要相應地調整它，因為他從一個反向角度接近它。 您可以給我們的詳細信息......我們可以提供更好的幫助。

希望這可以幫助
G

Answer 2

此代碼從用戶的選擇中獲取html / text，但它僅適用於IE。 該代碼也適用於交叉標記選擇。 （Globals用於保持代碼簡短。）

<script>
function selected(){
    thediv=document.getElementById('div');
    res=document.getElementById('htm');
    userSelection=document.selection;
    userRange=userSelection.createRange();
    /* For wider scale of elements */
    // rangeParent=userRange.parentElement();
    // if(rangeParent!=thediv) userRange.moveToElementText(rangeParent);
    rangeText=userRange.htmlText;   // OR: rangeText=userRange.text;
    res.innerText=rangeText;    
    return; 
}    
</script>
</head>    
<body onload="document.onselectionchange=selected;">
<div id="div">
<h1>The great testpage</h1>
<p>A paragraph with some text</p>
<p>This paragraph <b>contains</b> a child element.</p>
<p>And this is the last paragraph.</p>
<table>
<tr><td>Cell1-1</td><td>cell1-2</td></tr>
<tr><td>Cell2-1</td><td>cell2-2</td></tr>
</table>
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
</div>
<br>
<span id="htm"></span>
</body>

在thediv選擇之前和之后的內容你會得到這樣的： prepost=thediv.innerHTML/innerText.split(rangeText);

如果頁面包含除了thediv任何其他元素，則必須使它們不可選。

如何在選擇之前，之內和之后獲取HTML（不在textarea中）？

問題描述

2 個解決方案

解決方案1
1 2012-03-03 04:23:06

解決方案2
0 2012-03-03 10:18:08

如何在選擇之前，之內和之后獲取HTML（不在textarea中）？

問題描述

2 個解決方案

解決方案1 1 2012-03-03 04:23:06

解決方案2 0 2012-03-03 10:18:08

解決方案1
1 2012-03-03 04:23:06

解決方案2
0 2012-03-03 10:18:08