新浪微博插入话题后部分文字选中的js实现

为什么80%的码农都做不了架构师？>>>   

文字的选中功能是不太常用的功能，多出现在文本编辑器中，或是文本域之类的光标处理上。所以呢，使用的一些属性也并不是常见的。在IE浏览器下使用的是createTextRange而Firefox/chrome等现代浏览器下使用的是setSelectionRange。

假设文本域对象的名称是obj，则在IE及非IE浏览器下实现指定文字选中的代码如下：

IE浏览器下：

var range = obj.createTextRange();  
range.moveStart("character", 开始序号);           
range.moveEnd("character", 结束序号);
range.select();

非IE浏览器下：

obj.setSelectionRange(开始序号, 结束序号);
obj.focus();

所以，为了在各个浏览器下都能实现效果，我们需要将上面的两段代码组合一下，结果如下：

if(obj.createTextRange){//IE浏览器 var range = obj.createTextRange();              
    range.moveEnd("character",结束序号);
    range.moveStart("character", 起始序号);
    range.select();
}else{//非IE浏览器 obj.setSelectionRange(起始序号, 结束序号);
    obj.focus();
}

封装后的代码：

var textSelect = function(o, a, b){
	//o是当前对象，例如文本域对象
	//a是起始位置，b是终点位置
	var a = parseInt(a, 10), b = parseInt(b, 10);
	var l = o.value.length;
	if(l){
		//如果非数值，则表示从起始位置选择到结束位置
		if(!a){
			a = 0;	
		}
		if(!b){
			b = l;	
		}
		//如果值超过长度，则就是当前对象值的长度
		if(a > l){
			a = l;	
		}
		if(b > l){
			b = l;	
		}
		//如果为负值，则与长度值相加
		if(a < 0){
			a = l + a;
		}
		if(b < 0){
			b = l + b;	
		}
		if(o.createTextRange){//IE浏览器
			var range = o.createTextRange();         
			range.moveStart("character",-l);              
			range.moveEnd("character",-l);
			range.moveStart("character", a);
			range.moveEnd("character",b);
			range.select();
		}else{
			o.setSelectionRange(a, b);
			o.focus();
		}
	}
};

一些说明：
1. 只受用于一些含有value属性的HTML控件，例如单行文本框、多行文本域；
2. 后面两个参数表示起始字符位置与结束的字符位置，如果位置值为空，或是非数值，则会（从头或至尾或全部）选择字符；
3. 支持负值，负值表意与js中的slice属性一致，负值表示的含义就是负值与字符总长度的和，也可以理解为从末尾开始选择；
4. 如果数值范围超过字符总长，则无内容选择；
5. 支持单参数，省略第三个参数表示一致到字符结束都要选中。

转载于:https://my.oschina.net/jsan/blog/156434