Question

javascript怎么获取鼠标选中的文字并对其进行操作

我需要做一个HTML在线编辑器类似的东西，需要鼠标选中文字然后点击按钮给文字加粗或设置颜色，要求兼容各浏览器，javascript或者jQuery写的都行，原理我基本都了解，但是具体代码不知道该怎么写，问题解决了分数不是问题，因为不确定是否有人回答所以分数先放少点，问题解决了再追加分数

Answer 1

给我100分
我给你把代码贴上来

这个实现还是很容易的！
算了，你还是看着给把！
document.onmouseup=function(e){
content=window.getSelection().toString();
if(content!=''){
var len=content.length;
var target=e.target;
var position=target.innerHTML.indexOf(content);
var position2=position+len;
var tempstr1=target.innerHTML.substring(0,position);
var tempstr2=target.innerHTML.substring(position2);
content="<span style='color:red;'>"+content+"</span>";
target.innerHTML=tempstr1+content+tempstr2;
}}
实现了选中了就变红，自己扩展下把！
还有这个暂时只在chrome下能用，ie 你自己改把！

追问

你这个跟我要求的差的不是一点啊，我要的是点按钮改变，不是鼠标松开，而且你这个问题还非常多，交叉着选中文字你就知道了

Answer 2

用selection对象，但是我做过，比较繁杂，火狐和ie下还不一样，一个是document.selection. 一个是window.getSelection().getRangeAt(0);比较复杂，动作得分解好多，虽然我说的跟没说一样，但是我个人建议是做这个得两三个人一起开发，其次参考文档或者别人写的。而且网上的方法不够兼容建议找正规的插件（百度团队开发的有）；

追问

好吧，现在遇到新的问题了，选中的文字能够获取到，但是我需要点按钮给选中的字加粗，我点的时候选中的内容会失去焦点，所以获取不到东西了，有办法不让选中的内容失去焦点或者不允许点的按钮得到焦点吗？

追答

呵呵 可以这样啊 ，e.preventDefault()

Answer 3

引用wocabuzhidao的回答：
给我100分
我给你把代码贴上来

这个实现还是很容易的！
算了，你还是看着给把！
document.onmouseup=function(e){
content=window.getSelection().toString();
if(content!=''){
var len=content.length;
var target=e.target;
var position=target.innerHTML.indexOf(content);
var position2=position+len;
var tempstr1=target.innerHTML.substring(0,position);
var tempstr2=target.innerHTML.substring(position2);
content="<span style='color:red;'>"+content+"</span>";
target.innerHTML=tempstr1+content+tempstr2;
}}
实现了选中了就变红，自己扩展下把！
还有这个暂时只在chrome下能用，ie 你自己改把！

选中变红以后 如何在选中的部分再选中其中的一部分让他在上面叠加变绿？

Answer 4

都有开源插件何必还要自己写呢

追问

自己写的跟人家写的肯定是不一样的，我只要几个功能就行了，而且我这是直接编辑整个页面的，跟别的也不一样

Answer 5

我在回答你问题的时候，用的就是这样的编辑器，你看看