通过忽略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

回答

相关问题