今天我们用JS简单地实现选中文字分享，比如分享到新浪微博。

我们要实现的效果呢，就是下面这样的：

简单分析下就是，先选中文字(10个字以上，可以在js里设置最少选中字数)，然后松开鼠标，在鼠标的位置显示一个微博小图标，点击小图标即可跳转到微博分享页面，然后登陆微博账号即可分享啦。

Html结构的话就是一个简单的p标签，一段文字而已。

页面结构CSS样式的话，自己按需定义就好了。

主要是JS的实现，原生JS简单实现：

window.onload = function(){
  // 获取选中文字
  function selectText(){
    if(document.selection){//ie
      return document.selection.createRange().text;
    }
    else{//标准
      return window.getSelection().toString();
    }
  }
  // 获取元素
  var oP = document.getElementById('p1');
  var oDiv = document.getElementById('div1');
  // 添加事件
  oP.onmouseup = function(ev){
    var ev = ev || window.event;
    var left = ev.clientX;
    var top = ev.clientY;
    // 如果选取文字长度大于10，显示新浪小图标，定位到鼠标的位置
    if(selectText().length > 10){
      setTimeout(function(){
      oDiv.style.display = 'block';
      oDiv.style.left = left + 'px';
      oDiv.style.top = top + 'px';
      },100);
    }
    else{
      oDiv.style.display = 'none'; // 否则不显示图标
    }
  };
  // 阻止事件冒泡
  oP.onclick = function(ev){
    var ev = ev || window.event;
    ev.cancelBubble = true;
  };
  // 点击页面其它地方隐藏小图标
  document.onclick = function(){
    oDiv.style.display = 'none';
  };
  // 点击小图标跳转网页至微博分享页面
  oDiv.onclick = function(){
    window.location.href = 'https://service.weibo.com/share/share.php?url=https://www.baidu.com/&title=' + selectText();
  };
}

以上就实现了，选中文字分享至新浪微博啦，想试一下手感的狠戳这里吧。相信大家还有很多好的方法，我们，加油！

Over~拜