通過忽略div標籤的內部元素來選擇文本javascript

<html> 
<body> 
<script language="javascript"> 
function getSelectionHTML() 
{ 
    var div = document.getElementById("myDiv"); 

    if (document.createRange) { 
     var textNode=div.firstChild; 
     var rangeObj=document.createRange(); 
     rangeObj.setStart(textNode,0); 
     rangeObj.setEnd(textNode,5); 
     div .innerHTML = div .innerHTML.replace(rangeObj.toString(), '<span style="background-color: lime">'+rangeObj.toString()+'</span>') 
    } 
} 
</script> 
<div id="myDiv"> 
asdf as<b>dfas df asf asdf sdfjk dvh a sjkh jhcdjkv</b> iof scjahjkv ahsjv hdjk biud fcsvjksdhf k 

</div> 
<form name="aform"> 
<input type="button" value="Get selection" onclick="getSelectionHTML()"> 
</body> 
</html>

好的。讓我解釋 - > getSelectionHTML（）方法用於從0到10的字符選擇。我通過「myDiv」id獲取值。但內部粗體，斜體&其他標籤給我麻煩。通過忽略div標籤的內部元素來選擇文本javascript

簡而言之，我只想對「myDiv」標籤中的前十個字符（&應用它們的span標籤）進行選擇。

我到底錯過了什麼？

來源

2010-06-01 Sagar R. Kothari

爲什麼你使用兩個局部變量來存儲'document.getElementById（'myDiv'）'？ – 2010-06-01 13:27:36

@Marcel - 等待更正。請參閱 - 幾秒鐘後編輯的問題。 – 2010-06-01 13:29:36

嘿！注意這一點。我試圖在這個鏈接 - http://help.dottoro.com/ljvfwqlq.php – 2010-06-01 14:12:07

您正在嘗試選擇例如字符1到10的文字。但是在使用Range.setStart和.endStart時，第一個參數是包含文本的文本節點。如果使用Firebug（或Web Inspector）瀏覽DOM，則會注意到文本中的字符10位於另一個元素（<b>元素）中，並具有自己的文本節點。

順便說一下，你遺漏了幾個必需的元素/標籤，其中可以也是一個錯誤的來源。

我的修正版本讀取

<!DOCTYPE html> 
<html> 
<head> 
    <title>Title element is required</title> 
<body> 
<script> 
function getSelectionHTML() 
{ 
    var div = document.getElementById("myDiv"); 
    var bEl = document.getElementById("bEl"); 

    if (document.createRange) {. 
     var textNode=div.firstChild; 
     var rangeObj=document.createRange(); 
     rangeObj.setStart(textNode,0); 
     rangeObj.setEnd(bEl.firstChild,2); 
     alert(rangeObj.toString()); 
//  div.innerHTML = div.innerHTML.replace(rangeObj.toString(), '<span style="background-color: lime">'+rangeObj.toString()+'</span>'); 
    } 
} 
</script> 
<div id="myDiv"> 
asdf as<b id="bEl">dfas df asf asdf sdfjk dvh a sjkh jhcdjkv</b> iof scjahjkv ahsjv hdjk biud fcsvjksdhf k 
</div> 
<form name="aform"> 
    <input type="button" value="Get selection" onclick="getSelectionHTML()"> 
</form> 
</body> 
</html>

現在rangeObj包含選定的文本，但你不能簡單地插入<span>元素你試過的方式，因爲元素不能被嵌套這樣：

<span>asdf as<b>dfa</span>s df asf…

來源

2010-06-01 13:54:14

但這是靜態的解決方案，可能是粗體或可能不是。其中可能還有其他標籤。我忽略了內在的因素。 – 2010-06-01 13:57:52

如果你說它不能被打斷 - 那麼這怎麼可能？ theSelection = document.selection.createRange（）。htmlText; （「」+ +選擇+「」）; – 2010-06-01 14:07:20

@sugar：無論是否有內在因素，我都已經擔心你希望在任何情況下都能夠正常工作。不幸的是，你不能忽視它們。您必須計算父元素中的字符數，然後遍歷DOM來計算每個子元素中的字符數，直到獲得所需的字符數。 – 2010-06-01 14:56:19

這在使用TextRange的IE中更容易，它基於字符，單詞和句子而不是節點和偏移量。在非IE瀏覽器中，您需要在DOM中執行繁瑣的手動遍歷文本節點。但是，即使您要這樣做以獲取<div>（這將是「asdf asdfa」）中的前十個文本字符，但您的策略存在缺陷，因爲您正在使用innerHTML上的替代品，該替代品會嘗試並且無法找到「asdf asdfa」（innerHTML將根據瀏覽器以「asdf as <b> dfa」或可能「asdf as <B>」開頭）。

我建議使用DOM遍歷來找到<div>中的所有文本節點，並用<span> s來包圍需要的文本節點的部分，從而完全避免了Ranges，因此可以在所有主流瀏覽器中實現此功能。

來源

2010-06-01 13:59:29

通過忽略div標籤的內部元素來選擇文本javascript

回答

相關問題