本文介绍如何使用原生JavaScript实现网页文字选中后自动弹出分享提示框，并一键将选中内容分享至新浪微博。该方法不依赖任何第三方库，兼容主流浏览器，通过简单的API调用即可为网站添加便捷的社交分享功能，提升用户互动体验。
功能简述
一、功能简述 当前微博平台热度不减，其分享功能已成为网站推广产品的重要手段。因此，如何便捷地利用微博分享功能显得尤为关键。在我的站点中，每篇文章底部都设有分享链接：
然而，我认为这些常规的分享按钮往往形同虚设。除非文章内容极具震撼力或情感冲击力，否则用户很少主动点击。若能提供更便捷的分享方式，或许能改善这种冷清的局面。 许多翻译软件具备划词翻译功能，例如有道桌面词典的桌面划词翻译：
启用该功能后，只需选中软件中的任意一段文字，便会弹出类似的浮动提示框：
效果演示
在Web页面中，我们也可以实现类似的效果：划词→显示提示→分享。这正是本文旨在展示的核心内容。 二、效果与demo demo页面的文字是随机选取的博客内容，仅作为示例。随意选择一段文字，结果会出现新浪的标志性图标，如下图所示：
随后，点击那个动态显示的图标，即可实现选中文字分享到新浪微博的功能——这将打开一个新页面，效果如下：
实现方法与代码
分享过程是否简单便捷？ 三、方法与代码 选中即分享的功能看似高级，实则实现原理简单。其中复杂的原理部分此处省略。我将此JS文字选中后分享到新浪微博的功能进行了封装，方法名为：$sinaMiniBlogShare。如果您不喜欢此名称，可以自行修改甚至移除。该方法的完整代码如下：
var $sinaMiniBlogShare = function(eleShare, eleContainer) {
var eleTitle = document.getElementsByTagName("title")[0];
eleContainer = eleContainer || document;
var funGetSelectTxt = function() {
var txt = "";
if(document.selection) {
txt = document.selection.createRange().text; // IE
} else {
txt = document.getSelection();
}
return txt.toString();
};
eleContainer.onmouseup = function(e) {
e = e || window.event;
var txt = funGetSelectTxt(), sh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
var left = (e.clientX - 40 < 0) ? e.clientX + 20 : e.clientX - 40, top = (e.clientY - 40 < 0) ? e.clientY + sh + 20 : e.clientY + sh - 40;
if (txt) {
eleShare.style.display = "inline";
eleShare.style.left = left + "px";
eleShare.style.top = top + "px";
} else {
eleShare.style.display = "none";
}
};
eleShare.onclick = function() {
var txt = funGetSelectTxt(), title = (eleTitle && eleTitle.innerHTML)? eleTitle.innerHTML : "未命名页面";
if (txt) {
window.open('http://v.t.sina.com.cn/share/share.php?title=' + txt + '→来自页面"' + title + '"的文字片段&url=' + window.location.href);
}
};
};
从代码中可以看出，$sinaMiniBlogShare方法包含两个参数：eleShare和eleContainer。其中，前一个参数是必需的，指文字选中后出现的浮动层元素（在本文demo中即为新浪图标）；后一个参数指文字选择的容器元素，为可选参数。若不设置，则默认为document元素，即整个页面文字选中都会触发分享功能。 假设新浪微博分享图标的HTML结构如下：
<img id="imgSinaShare" class="img_sina_share" title="将选中内容分享到新浪微博" src="http://simg.sinajs.cn/blog7style/images/common/share.gif" />
则直接调用：
$sinaMiniBlogShare(document.getElementById("imgSinaShare"));
即可实现选中文字分享到新浪微博的功能。 该方法不存在兼容性问题，IE、Firefox或Chrome等浏览器均可轻松使用；此外，该方法基于原生JavaScript代码，不依赖任何库，因此只要浏览器不禁用JavaScript，即可在任何地方使用，确实方便快捷，是网页开发的实用工具。
实际上，此方法不仅支持新浪微博，也支持腾讯微博、搜狐微博等其他平台。只需根据各微博分享页面的API地址，替换window.open()中的链接即可实现。 以上即为JS实现选中页面文字将其分享到新浪微博的方法。由于时间仓促、技术有限，欢迎指正，共同进步。