javascript:如何更改我的获取选择函数以不从选择中的第一个 DOM 元素中删除多余的空格?

标签 javascript jquery dom range

更新:显然,我遇到的问题只影响选择中的第一个元素。

JSFiddle:http://jsfiddle.net/NhQCR/

我从网页中进行选择的代码:

if (!window.TB) {
    TB = {};
}

TB.Selector = {};
// http://stackoverflow.com/questions/5643635/how-to-get-selected-html-text-with-javascript
// and
// http://stackoverflow.com/questions/7690319/javascript-how-do-i-expand-a-user-selection-based-on-html-tags
TB.Selector.getSelected = function() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var range = sel.getRangeAt(0);

            var startEl = sel.anchorNode;
            if (startEl != range.commonAncestorContainer) {
                while (startEl.parentNode != range.commonAncestorContainer) {
                    startEl = startEl.parentNode;
                }
            }
            var endEl = sel.focusNode;
            if (endEl != range.commonAncestorContainer) {
                while (endEl.parentNode != range.commonAncestorContainer) {
                    endEl = endEl.parentNode;
                }
            }
            range.setStartBefore(startEl);
            range.setEndAfter(endEl);

            sel.addRange(range);

            var container = document.createElement("div");
            container.appendChild(sel.getRangeAt(0).cloneContents());

            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
    return html;
}

以及我如何获得选定的文本:

        var selected_text = TB.Selector.getSelected();

不幸的是,如图所示,这种选择文本的方法删除了某些空白字符,并在选择的末尾添加了一个空的 div

enter image description here

这是选择在网页上的样子: enter image description here

对于那些想知道的人:这就是我如何获得警报以显示它的作用:

start_index = $j(".text_container").html().indexOf($selected_text);
end_index = start_index + $selected_text.length;
alert(start_index + " to " + end_index + "\n" + $selected_text + "\n=====================================\n" + $j(".text_container").html());

目前,选择代码将扩大选择以确保没有不匹配的标签。 我想要的代码可以让我准确了解网页上的内容,而无需删除/添加任何内容 =\我只是不知道从哪里开始 =\

最佳答案

我无法重现第一个问题“9 之前的空白”,即使我使用它也可能是由于字符集或小绿党造成的。不管怎样,我所有的选择都是从正确的点开始的。

对于第二期<div></div>最后,只需替换

range.setEndAfter(endEl); 

通过

range.setEndBefore(endEl);

当您从 0 到 length-1 的数组中选择内容时,这听起来不错。

关于javascript:如何更改我的获取选择函数以不从选择中的第一个 DOM 元素中删除多余的空格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7968006/

相关文章:

javascript - 如何在 JavaScript 中使用 switch

javascript - 如何从 WCF 服务 webHttpBinding 获取 javascript 代理

javascript - 使用理想邮政编码查找时可能出现 jquery 冲突

javascript - 使用 Select2 插件标记 Twitter 和 Facebook

javascript - 排序指令的 Angular 架构

javascript - 如何使用javascript获取字符串中 '@'之后的下两个单词

javascript - 固定导航-滚动到特定的 div 或 ID

javascript - 使用 jQuery 在输入框中选择字符串的一部分

javascript - Javascript 可以用来检测重定向的图像 SRC(在任何流行的浏览器中)吗?

javascript - 哪些情况会导致IE8偶尔无法加载脚本?