通过忽略div标签javascript的内部元素来选择文本

发布于 2024-09-03 12:53:12 字数 978 浏览 4 评论 0原文

<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”标签中的前十个字符（并应用它们跨度标签）。

我到底缺少什么？

原文

<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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

心凉怎暖 2024-09-10 12:53:13

在 IE 中使用 TextRange 会更容易，它基于字符、单词和句子，而不是节点和偏移量。在非 IE 浏览器中，您需要对 DOM 中的文本节点进行繁琐的手动遍历。但是，即使您这样做是为了获取

中的前十个文本字符（即“asdf asdfa”），您的策略也是有缺陷的，因为您正在使用替换在 innerHTML 上，它会尝试找到“asdf asdfa”，但失败（innerHTML 将以“asdf asdfa”开头，或者可能是“asdf as”，具体取决于浏览器）。

我建议进行 DOM 遍历，以查找

内的所有文本节点，并使用包围所需的文本节点部分，从而完全避免了范围，从而使其在所有主要浏览器中都可以工作。

回复收藏 0 原文

挽心 2024-09-10 12:53:13

您正在尝试选择文本的第 1 到 10 个字符。但是当使用 Range.setStart 和 .endStart，第一个参数是包含文本的文本节点。如果您使用 Firebug（或 Web Inspector）浏览 DOM，您会注意到文本的字符 10 驻留在另一个元素（ 元素）中，并具有自己的文本节点。

顺便说一句，您遗漏了几个必需的元素/标签，它们也可能成为错误来源。

我的更正版本显示

<!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>asdf as<b>dfa</span>s df asf…

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: