github地址：https://github.com/1314mxc/yunUI ，歡迎star！

說起“標注”，在HTML5之前，你可能想起的是各種瀏覽器插件，emmmmmmm或者說你根本不認為瀏覽器上可以有這種玩意。

但是HTML5來了，這是它的時代。

我們完全可以不借助CSS、JavaScript的力量實現這個東西 —— 因為瀏覽器實現了 這個神奇的標簽：

<ruby>
?<rb>中文rb>
?<rp>(rp><rt>zhongwenrt><rp>)rp>
ruby>

它是這樣表現的：據說在不支持ruby的瀏覽器中也能這樣適應：

除此之外，隨著前端的發展，CSS3也給我們帶來了“驚喜” —— 文字強調裝飾 text-emphasistext-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屬性是獨立的！text-emphasis-position屬性用來指定強調裝飾符的位置，默認位置是在正文的上方，我們可以指定強調裝飾符在正文的下方，也可以指定垂直排版的時候強調裝飾符是左側還是右側。語法如下：

text-emphasis-position:?[?over?|?under?]?&&?[?right?|?left?]

使用示意：

text-emphasis-position:?over?left;
text-emphasis-position:?under?right;
text-emphasis-position:?under?left;

text-emphasis-position:?left?over;
text-emphasis-position:?right?under;
text-emphasis-position:?left?under;
// text-emphasis-position的初始值是over right。right定位出現在文字垂直排版的時候，例如設置writing-mode:vertical-rl，此時就可以看到強調裝飾符在右側了

比如：

"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">aishfaoihfoiahfoahdfoiahfdoshoigsoidshioshghudsihfisjhiodshoishoighdihishoighsoivp>

筆者的思路是：當用戶鼠標“抬起”時，去判斷有沒有選中文本，如果沒有則啥事沒有、反之則要將這一部分選中的文本替換成標簽！

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之流是一樣的，并不會產生太大的變動)。諸君請看：

”selection

(如上圖)至此，選中狀態已經差不多了 —— 至于沒說的翻譯，這里如果你沒有足夠的能力建一個“詞庫”，那么我還是建議你啟用“第三方庫/插件”或者在線翻譯API。這里還有一個問題是：在筆者實踐過程中發現，ruby標簽是沒有辦法嵌套在行內元素中的：它會帶著其內包裹的文字消失不見 ！這一點一定注意。

好了，你總不能讓用戶一直處于這個狀態吧。那就要在一定情況下取消上面的狀態 —— 這里筆者也遇到了一些“奇葩”問題：

什么時候結束選中狀態？我建議，在點擊頁面其余空白地方時改變狀態 —— 因為為了更好的體驗，上面選中使用的mouseup：這里涉及到一個“瀏覽器事件觸發的優先級”。你可以讓文本處于“高zIndex區域”、或者用JS去隔離。

怎么取消？對這個才是大問題：你這里可能“理所應當的”想到了“把元素的標簽去掉不就完了”，這里你可以嘗試一下，可不是一件簡單的事。一開始筆者想到了 將dom再轉化回string，但是隨即想到了這個string怎么插入到父p標簽中，而且要插入到原位置！

輾轉了一上午，想到了一個“取巧的方法”：因為選中的文本已經是一個dom了，將選中的文本都轉化為string，然后再用字符串替換替換掉父p標簽的innerText內容的相同之處！~

/**
?*?將dom轉化為文本
*/
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)
?}
}
display

---

筆者開源了微信小程序日期組件擴展：可自定義精確到分、秒；可自定義位置、顏色、是否用默認樣式。地址：https://github.com/1314mxc/yunUI 歡迎star！

最后

• 歡迎加我微信(winty230)，拉你進技術群，長期交流學習...

• 歡迎關注「前端Q」,認真學前端，做個專業的技術人...

點個在看支持我吧 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的element中select默认选中第一个_探索在网页中使用“标注”的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。