通过忽略div标签javascript的内部元素来选择文本 [英] selecting text by ignoring inner Elements of div tag javascript
问题描述
< HTML>
< body>
< script language =javascript>
函数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>
<表格名称=aform>
< input type =buttonvalue =Get selectiononclick =getSelectionHTML（）>
< / body>
< / html>
好的。让我解释 - > getSelectionHTML（）方法用于从0到10的字符选择。我通过myDivid获取值。但内在的大胆，斜体&其他标签给我带来麻烦。简单地说，我只想选择myDiv中的前十个字符（&应用它们的span标签）标签。
我错过了什么？ 重新尝试选择例如字符1到10的文字。但是，当使用 Range.setStart 和 .endStart ，第一个参数是包含文本的文本节点。如果使用Firebug（或Web Inspector）浏览DOM，则会发现文本中的字符10驻留在另一个元素（< b> 元素）中，并带有自己的文本节点。
顺便说一句，你遗漏了几个必需的元素/标签， 也可能是错误的来源。 p>
我更正后的版本显示为
<！DOCTYPE html>
< html>
< head>
< title> Title元素是必需的< / title>
< body>
< script>
函数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>
<表格名称=aform>
< input type =buttonvalue =Get selectiononclick =getSelectionHTML（）>
< / form>
< / body>
< / html>
现在 rangeObj 包含所选文字，但您不能简单地按照您尝试的方式插入< span> 元素，因为元素不能以这种方式嵌套：
< span> asdf as< b> dfa< / span> s df asf ...
<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>
Ok. Let me explain -> getSelectionHTML() method is for selection of characters from 0 to 10. I am getting the values by "myDiv" id. but inner bold, italic & other tags are giving me trouble.
In simple words, I just want to make selection of first ten characters (& apply them span tag) which are in "myDiv" tag.
What exactly I am missing?
You're trying to select e.g. character 1 to 10 of your text. But when using Range.setStart and .endStart, the first parameter is the text node containing your text. If you browse through the DOM with Firebug (or Web Inspector), you'll notice that character 10 of your text resides in another element (the <b> element), with its own text node.
BTW, you left out several required elements/tags, which can also be a source of errors.
My corrected version reads
<!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>
Now rangeObj contains the selected text, but you can't simply insert a <span> element the way you tried, because elements can't be nested this way:
<span>asdf as<b>dfa</span>s df asf…
这篇关于通过忽略div标签javascript的内部元素来选择文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
