说起“标注”，在HTML5之前，你可能想起的是各种浏览器插件，emmmmmmm或者说你根本不认为浏览器上可以有这种玩意。
但是HTML5来了，这是它的时代。
我们完全可以不借助CSS、JavaScript的力量实现这个东西 —— 因为浏览器实现了 <ruby></ruby> 这个神奇的标签：
<ruby>
<rb>中文</rb>
<rp>(</rp><rt>zhongwen</rt><rp>)</rp>
</ruby>
它是这样表现的：
据说在不支持ruby的浏览器中也能这样适应：
除此之外，随着前端的发展，CSS3也给我们带来了“惊喜” —— 文字强调装饰 text-emphasis
text-emphasis家族总共有4个CSS属性，分别是：
- text-emphasis
- text-emphasis-color
- text-emphasis-style
- text-emphasis-position
其中，text-emphasis是text-emphasis-color和text-emphasis-style这两个CSS属性的缩写，注意，并不包含text-emphasis-position属性，text-emphasis-position属性是独立的！
比如：
<p id="p">aishfaoihfoiahfoahdfoiahfdoshoigsoidshioshghudsihfisjhiodshoishoighdihishoighsoiv</p>
//css
color: red;
-webkit-text-emphasis-style: '·';
text-emphasis-style: '·';
-webkit-text-emphasis-color: red;
text-emphasis-color:red;
-webkit-text-emphasis-position:under;
text-emphasis-position: under;
它是这样表现的：
稍稍有些小遗憾的是：它不能“针对每个字体设置不同的重点标志”，所以常常只用来做辅助突出功能
笔者一直认同的是：能用HTML完成的就不用CSS，能用CSS的就不用JS。并在日常实践中愈发觉得这是一条“至理”！
那么问题来了，现在我想实现这样一个功能：现在的「网页翻译」大多是“页面整体翻译”或者“弹框拖入”，少部分是“选中文字后在文字旁弹出一个提示框”，但是这几种方式不管是哪一种都会有一丝丝的影响：比如遮挡页面其余内容、精确度不高等等。
那能不能“当用户选中文字后在选中文本下方有突出强调、在文本上方出现翻译”呢？
（这个笔者在本文先不说，以免造成“长篇大论”，本文只把实现的基础知识全盘托出！）
首先是HTML：这里我们简单的做一个p标签：
<p id="p">aishfaoihfoiahfoahdfoiahfdoshoigsoidshioshghudsihfisjhiodshoishoighdihishoighsoiv</p>
笔者的思路是：当用户鼠标“抬起”时，去判断有没有选中文本，如果没有则啥事没有、反之则要将这一部分选中的文本替换成标签！
p.onmouseup=function(e){
var txt = window.getSelection();
console.log(txt)
var selectStr = txt.toString();
console.log(selectStr)
if(selectStr!==''){
replaceSelectedStrByEle(txt,selectStr,'nite-writer-pen')
}
}
这里 window.getSelection() 是浏览器API，专门用于获取用户选中的文本，其具体值用 .toString() 即可获得。
var replaceSelectedStrByEle = function(selecter,selectStr,className){
if (selectStr.trim != "") {
var rang = selecter.getRangeAt(0);
var ele = document.createElement("span");
ele.style.cssText="-webkit-text-emphasis-style: '·';text-emphasis-style: '·';text-emphasis-color:red;-webkit-text-emphasis-position:under;text-emphasis-position:under";
ele.className = className;
ele.textContent = selectStr;
rang.surroundContents(ele);
}
}
selecter.getRangeAt(0)：selection API是将每次选中的都保存到内部的数组里，而且是最新的保存到第一个这样的顺序。
没错这里就是用的 -webkit-text-emphasis 突出强调符 —— 如果要为某个元素一次添加多个样式，cssText可以优化性能！
受笔者“信奉”准则的影响，其实在这里一开始还想用纯CSS的 伪类::selection 去做突出强调，但是很不幸的是：这个伪类里面只能改变选中文字的颜色相关：如背景颜色、字体本身颜色。其他的什么都改变不了（不知道为啥，感觉很奇怪：虽说它是子选择器行为，但是其影响应该是和display之流是一样的，并不会产生太大的变动）。诸君请看：
（如上图）至此，选中状态已经差不多了 —— 至于没说的翻译，这里如果你没有足够的能力建一个“词库”，那么我还是建议你启用“第三方库/插件”或者在线翻译API。这里还有一个问题是：在笔者实践过程中发现，ruby标签是没有办法嵌套在行内元素中的：它会带着其内包裹的文字消失不见 ！这一点一定注意。
（估计是因为ruby是一个块级元素吧：w3c规定——行内元素中不能放块级元素，块级元素中虽然能放其它块级或行内元素，但是p标签例外；很尴尬，这两点本文情况全占了）
好了，你总不能让用户一直处于这个状态吧。那就要在一定情况下取消上面的状态 —— 这里笔者也遇到了一些“奇葩”问题：
-
什么时候结束选中状态？
我建议，在点击页面其余空白地方时改变状态 —— 因为为了更好的体验，上面选中使用的mouseup：这里涉及到一个“浏览器事件触发的优先级”。你可以让文本处于“高zIndex区域”、或者用JS去隔离。 -
怎么取消？
对这个才是大问题：你这里可能“理所应当的”想到了“把元素的标签去掉不就完了”，这里你可以尝试一下，可不是一件简单的事。一开始笔者想到了 将dom再转化回string，但是随即想到了这个string怎么插入到父p标签中，而且要插入到原位置！
辗转了一上午，想到了一个“取巧的方法”：因为选中的文本已经是一个dom了，将选中的文本都转化为string，然后再用字符串替换替换掉父p标签的innerText内容的相同之处！~
function nodeToString ( node ) {
//createElement()返回一个Element对象
var tmpNode = document.createElement( "div" );
//appendChild() 参数Node对象 返回Node对象 Element方法
//cloneNode() 参数布尔类型 返回Node对象 Element方法
tmpNode.appendChild( node.cloneNode( true ) );
var str = tmpNode.innerHTML;
tmpNode = node = null;
return str;
}
mxc.onclick=function(){
if(document.querySelector('p .nite-writer-pen')){
let p=document.querySelector('p .nite-writer-pen').parentNode
let nite=document.querySelector('p .nite-writer-pen')
console.log(nite)
console.log(p)
p.innerText=(p.innerHTML).replace(nodeToString(nite),nite.innerText)
}
}
