今天没有找到什么问题。。就找了个别人想做的小demo，然后恬不知耻的做了下来。
光标选中的字符更改样式
哈哈，一开始听到又是懵的，好像不太可能，人家文本都是一个pre或者span里储存的，你要把他变成一个字一个span么，当然大家可能都是这么想的。。虽然想法很可笑。不过有个比较重要的思路在里面，就是利用分割来完成这一系列的操作。
对，一个标签里面的文字出现两种状态，按照我现在的能力来说，是不可能的。
所以解决的思路就是多个标签分割来制作。
先贴最开始的代码
<body>
<div id="warp">
<span>abcdefgabcdefgabcdefgabcdefg</span>
</div>
</body>那么第一个问题来了，我们改怎么获取鼠标光标划过的内容呢。如果你去百度，百度上就会有很亲切很亲切的人告诉你，有个方法叫window.getSelection()，能够帮助你完成操作，照例我先去粘贴一下
Selection对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。要获取用于检查或修改的Selection对象，请调用 window.getSelection()。
锚点（anchor）
锚指的是一个选区的起始点（不同于HTML中的锚点链接，译者注）。当我们使用鼠标框选一个区域的时候，锚点就是我们鼠标按下瞬间的那个点。在用户拖动鼠标时，锚点是不会变的。
焦点（focus）
选区的焦点是该选区的终点，当您用鼠标框选一个选区的时候，焦点是你的鼠标松开瞬间所记录的那个点。随着用户拖动鼠标，焦点的位置会随着改变。
范围（range）
范围指的是文档中连续的一部分。一个范围包括整个节点，也可以包含节点的一部分，例如文本节点的一部分。用户通常下只能选择一个范围，但是有的时候用户也有可能选择多个范围（例如当用户按下Control按键并框选多个区域时，Chrome中禁止了这个操作，译者注）。“范围”会被作为range对象返回。Range对象也能通过DOM创建、增加、删减。
很好，那么第一部分就解决了，我们只要用window.getSelection()，并且用上anchor和focus还有range就可以获取内容。（代码我就不一步步粘贴了，最后一起放）
接下来的替换，我们就需要根据anchor和range或者是focus和range（这里主要是防范有些人喜欢倒着往前滑光标来选中文字）选中的内容，来对整个文本进行分割
这里呢，我思考了一下，最后选择用的是正则表达式，来对文本内容进行匹配和控制，（所以说正则表达式还是很重要的，推荐大家多去学学。）
至于绑定的事件呢，我还是考虑放在body中（考虑到之后的文本不一定会在一个span里面）
状态不是很好。。。就不写很多解释了。。大家不懂的话，可以留言来问我。
下面贴代码
直接粘贴请记得导入jquery
想用原生js的请将部分正文内容与注释内容替换
<body onmouseup="test(event)">
<div id="warp">
<span>abcdefgabcdefgabcdefgabcdefg</span>
</div>
<button onclick="rest()">rest</button>
</body>
<script type="text/javascript">
function rest(){
var texts = $('#warp>span').text()
//var texts = document.getElementById('warp').getElementsByTagName('span')[0].innerText
///如果要用 firstChild 切记div和span中间没有换行和空格
$('#warp>span').html(texts)
//document.getElementById('warp').getElementsByTagName('span')[0].innerHTML = texts
}
var size = 80+'px' //字体大小在这里
function test(event){
//event.target.style.fontSize
if($(event.target).css('font-size')==size){
return ;
}
var warp = $('<span></span>')
//var warp = document.createElement('span')
var divs = $('<span></span>')
//var divs = document.createElement("span")
$(divs).css('font-size',size) //样式增加在这里
//divs.style.fontSize = size;
if(window.getSelection()!=""){
$(divs).text(window.getSelection())
//divs.innerText = window.getSelection()
var the = event.target
$(warp).append(divs)
//warp.appendChild(divs)
var begin = window.getSelection().anchorOffset
var endin = window.getSelection().focusOffset
if(endin<begin) begin = endin
var count = $(divs).text().length
//var count = divs.innerText.length
var ftest = new RegExp("^(\\w{"+begin+"})\\w{"+count+"}")
var texts = event.target.innerHTML.replace(ftest,'<span>'+'$1'+'</span>'+$(warp).html()+'<span>') //warp.innerHTML
$(the).html(texts)
//the.innerHTML = texts
}
}
</script>