JS-range对象

2016-02-18

先马上代码片段

function rangeTest(){
	var html;
	var showRangeDiv = document.getElementById("showRange");
	var selection=document.getSelection();
	if (selection.rangeCount>0) {
		html="您选取了"+selection.rangeCount+"内容"
		for (var i = 0; i<selection.rangeCount;i++) {
			var range = selection.getRangeAt(i)
			html+="第"+(i+1)+"段内容为："+range+"</br>";
			showRangeDiv.innerHTML=html;
		};
	};
}

1 2	<input type="button" value="click" onclick="rangeTest()"> <div id="showRange"></div>

功能

输出选中内容

分析

1.”showRangeDiv”获取”showRange”id。

2.getSelection()方法。突然想到电子阅读时的颜色自动高亮标记，就是选中一块内容，然后那一块变色，感觉可以用这个试试，等我捋完。

3.判断所选内容是否为空。selection.rangeCount是一个所选内容片段的计数，因为有些浏览器可以同时选中好几段内容。

4.同样，下面的for循环也是按顺序依次输出每段选取的内容，selection.getRangeAt(i)为内容。

5.innerHTML：之前一直忽视的一个东西，百度了一段容易理解的解释。
innerHTML在JS是双向功能：获取对象的内容或向对象插入内容。
如：

1	<div id="aa">这是内容</div>

，我们可以通过 document.getElementById(‘aa’).innerHTML 来获取id为aa的对象的内嵌内容；

也可以对某对象插入内容，如
document.getElementById(‘abc’).innerHTML=’这是被插入的内容’; 这样就能向id为abc的对象插入内容。

OK，就是那么简单，很基本的一个东西。对了，前面那个想法百度了一下，真的有人这样写。不过不是特别理想的效果，贴上源码来分析一下。
来源：http://ask.csdn.net/questions/166543

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="jquery.min.js"></script>
    <title>article元素</title>
</head>

<body>
    <div id="content" style="background: grey">
        乔布斯掌权时代的iPhone以精湛的做工受到广泛的关注，也受到了大量的果粉追捧。iPhone4S的黄金尺寸设计，再到iPhone5s的巅峰状态，但是iPhone6的横空出世似乎打破了苹果公司在工艺方面的追求。虽然iPhone6及其iPhone6 Plus的销量比前几代产品都要高 （原因受安卓大屏冲击的影响，果粉对大屏手机的欲望愈加的浓烈），但是收到广泛吐槽也是最多的。大白条，尤其是突出的摄像头，乔布斯知道估计都能从坟里跳出来！ 不喜欢的iPhone6的果粉可以等等了，iPhone7马上就要来临了，这是国外设计师设计出的一部iPhone7的概念图，这部iPhone7不仅做工精湛， 而且消除了打白条和涉嫌头突出问题，更重要的是采用了iPhone4的双面玻璃设计，边角做出了圆润设计，不仅时尚，而且商务气息十足， 适合追求时尚的年轻人和商务人士使用，受用人群更广泛了。
    </div>
</body>
<script type="text/javascript">
$(function() {
    $("#content").mouseup(function(e) {
        if (window.getSelection) {
            var textObj = document.getElementById("content");
            var selectedText = window.getSelection().toString();
            alert(selectedText);
            selectedText = "<span style='background:red'>" + selectedText + "</span>";

            var start = window.getSelection().anchorOffset;
            var end = window.getSelection().focusOffset;

            var tempStr1 = textObj.innerHTML.substring(0, start);
            var tempStr2 = textObj.innerHTML.substring(end);

            document.getElementById("content").innerHTML = tempStr1 + selectedText + tempStr2;

        }


    });

});
</script>

为了方便，把style=”background: grey”去掉（实在看不惯灰色的背景黑色的字……对，我就是矫情），去掉弹出框，文字换成123456789。

刚开始一直从题主的问题描述中下手，无果，索性用最笨的方法，一个个记录找规律：

首先，选取1，很正常，表示为 123456789
接着选取2，表示为 2123456789
刷新，选取顺序为 1 3，表示为 3123456789
刷新，选取顺序为 1 4，表示为
4span style=”background:red;”>123456789

好像发现了什么，继续~

刷新，选取顺序为 1 5，表示为

<5pan style="background:red;">123456789

多做几次试验，发现第二次选取果然与第一次有关。
设第一次选取的值的位置为x，第二次选取的值的位置为y。记div中第一个数的位置为0
yx时，当y-x=1,2,3,4……y对应的数所在的位置分别为-2，-1，依次替换

1	<span style="background:red;">

并且第一次选取的数背景色消失。至于为什么会出现这种情况我表示很神奇……很神奇。
再来看一下最后三行代码

var tempStr1 = textObj.innerHTML.substring(0,start); 
var tempStr2 = textObj.innerHTML.substring(end); 

document.getElementById("content").innerHTML = tempStr1 + selectedText + tempStr2 ;

以selectedText为界来看，来个推测，当y-x<=2时，tempStr1=0,tempStr2=x-y+2个空格+textObj

太太太混乱了，好像很难通过更改表达式使它正常，似乎最简单的方法确实是跳出span，从div开始。html中给文字加了一个id为test的span，然后尝试用test作为起点终点，神奇的是，加了以后函数仅执行一次，想通过循环来实现函数的再次执行，试了几次依然未果，好伐，这个问题先放一边。

不过这个过程倒是发现了一些有趣的东西，比如rangy.js,有时间可以看看它的源码。
文档：https://code.google.com/p/rangy/
demo：https://code.google.com/p/rangy/

2017.09.02更新

前几天做了个公司的面试题挺有意思的，分享一下：

我的回答：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        #demo {
            margin-bottom: 100px;
        }
        #demo span:nth-child(1){
            background-color: rgb(200, 200, 200)
        }
        #demo span:nth-child(2){
            background-color: rgb(200, 255, 200)
        }
        .select1{
            background: rgb(200, 200, 200);
        }
        .select2{
            background: rgb(200, 255, 200);
        }
    </style>
</head>
<body>
    <div style="color: #aaa">
        <p>使用原生 JavaScript 实现鼠标划取下面段落中任意长度的文字实现高亮该段文字。</p>
        <p>要求：支持划取多个区域、区域之间允许包含关系</p>
    </div>
    <hr />
    <p>示例（仅演示）：</p>
    <p id="demo">火光熄灭之后，山林归于漆黑寂静。<span>岳绮罗</span>坐在一棵老树下，无声的翕动了嘴唇：“张显宗。”她以手托腮，不带感情的发出声音：<span>“张显宗，我<span>牙疼</span>。”</span>向后靠向老树树干，她继续自言自语：“这辈子没活好，很糟糕。”</p>

    <p>你的实现：</p>
    <p id="target">火光熄灭之后，山林归于漆黑寂静。岳绮罗坐在一棵老树下，无声的翕动了嘴唇：“张显宗。”她以手托腮，不带感情的发出声音：“张显宗，我牙疼。”向后靠向老树树干，她继续自言自语：“这辈子没活好，很糟糕。”</p>

    <script>
        // code here
    var textObj = document.getElementById("target");
    textObj.onmouseup = function(){
        surroundSelection()
    }
    
    function surroundSelection() {
        var element = document.createElement('span');
        if (window.getSelection) {
            var sel = window.getSelection();
            if (sel.rangeCount) {
                var range = sel.getRangeAt(0).cloneRange();
                setTimeout(function() {
                    if(sel.anchorNode.className == 'select1'){
                        element.className = 'select2'
                    }else{
                        element.className = 'select1'
                    }

                }, 0)
                range.surroundContents(element);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    }


    </script>
</body>
</html>