如何在使用javascript的頁面上選擇任意文本？

比方說我有一個contentEditable div，給用戶可以編輯和更改裏面的文字和元素。我該如何用javascript改變這div的選擇？「改變」並不意味着「改變用戶選擇的內容」，我的意思是實際改變什麼被選中。用戶應該能夠在選擇上輸入，並用其他名稱替換。如何在使用javascript的頁面上選擇任意文本？

這應該考慮到我可能想跨元素選擇文本。例如：

<p>Some text <span>goes</span> here.</p>

我可能想要例如選擇「某些文本去」或<p>內的所有內容。

這隻需要在Safari/Webkit中工作。

在此先感謝。作爲一名本地代碼開發人員，我發現DOM和Javascript通常很令人沮喪。

來源

2009-11-15 Lucas

除非你需要編寫自己生成隨機數，你可能想看看TinyMCE的，http://tinymce.moxiecode.com/，因爲它是一個很好的所見即所得的編輯器在JavaScript中。

爲了做到這一點，你可能會想看看這樣的事情： http://codingtricks.blogspot.com/2009/03/javascript-select-partial-text-in-div.html

這些也可能會有所幫助： JavaScript ranging gone wrong https://developer.mozilla.org/en/DOM/window.getSelection

你所要做的將是複雜的，因爲您需要選取所選區域，刪除所有標籤，然後將標籤放入所需區域。

來源

2009-11-15 01:41:14

您可以使用document.getElementById('your_text_id').setSelectionRange(start, end);，你可以使用Math.random()爲start和end

來源

2009-11-15 01:39:45

謝謝，但我需要能夠跨元素邊界進行選擇。而通過「隨意」，我並不是指* random *。我確切地知道選擇應該開始和結束的元素，直到字符偏移。 – Lucas 2009-11-15 17:38:44

只是爲了詳細回答我的問題，因此任何人尋找類似的東西沒有到別處去尋找......

我最終使用的代碼是這樣的：

var range = document.createRange(); 
range.setStart(<get the node the selection starts in>, <char offset in that node>); 
range.setEnd(<get the node the selection ends in>, <char offset in that node>); 

window.getSelection().removeAllRanges(); 
window.getSelection().addRange(range);

非常感謝詹姆斯布萊克指出我正確的方向。

來源

2009-11-17 22:35:55 Lucas

感謝您在這裏發佈:) – 2014-01-22 21:08:42

雖然@盧卡斯的答案是好的，但有很多缺失，可以讓你成功地使用它。選擇開始的節點必須是確切的節點，而不是父節點。在我們的例子中，我們試圖將一些文本放入TextAngular控件中，然後選擇看起來喜歡____的文本，以便用戶可以「填空」。

我們的投入是爲了<p>Some text goes here: _____</p>或

<p>Some partial goes here 
<ul> 
    <li>Option 1</li> 
    <li>_____</li> 
</ul>

爲了得到這個工作的HTML，我們不得不在最後寫的東西，找到下劃線在正確的元素

function find_(node) { 
    var i, n; 
    // return the node with the _'s 
    for(i=0; i < node.childNodes.length; ++i) { 
     n = node.childNodes[i]; 
     console.debug(n); 
     if(n.textContent) { 
      console.debug(n, n.textContent); 
      if(n.textContent.search(/___+/) > 0) { 
       return n; 
      } 
     } 
     if(n.childNodes) { 
      console.debug(n, n.childNodes); 
      n = find_(n); 
      if(n) { 
       return n; 
      } 
     } 
    } 
    return null; 
}

所以，找到節點滿足<get the node the selection starts in>的工作比這個簡單的句子讓我相信的工作要多得多。

在<ul>的情況。包含____的節點是li節點的firstChild。

我已經把這個在這裏幫助其他需要做到這一點不知道爲什麼他們得到了錯誤信息

IndexSizeError: Failed to execute 'setStart' on 'Range': There is no child at offset 65.

當問題他們只是在尋找錯誤的節點。

來源

2014-05-20 16:38:52 boatcoder

如何在使用javascript的頁面上選擇任意文本？

回答

相關問題