通过忽略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获取值.但内心大胆,斜体和其他标签给我带来麻烦.
简单来说,我只想选择“myDiv”标签中的前十个字符(并将它们应用于span标签).
究竟我错过了什么？
解决方法:
你试图选择例如你的文字的第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…
标签：javascript,dhtml,safari,html 来源： https://codeday.me/bug/20190701/1342595.html