娆㈣繋鍏虫敞鎴戠殑鍏紬鍙凤細鍓嶇澶т睛鎺粙缁嶄竴涓瘮杈冨墠娌夸絾闈炲父濂界敤鐨勬柊鐗规€э細涓€涓祻瑙堝櫒鍘熺敓鏀寔鐨凜SS鏂囨湰楂樹寒鍔熻兘锛屽畼鏂瑰悕绉版槸CSSCustomHighlightAPI锛屾湁浜嗗畠锛屼綘鍙互鍦ㄤ笉鏀瑰彉dom缁撴瀯鐨勬儏鍐典笅鑷畾涔変换浣曟枃鏈殑鏍峰紡銆傛瘮濡傛悳绱㈣瘝楂樹寒锛屼篃鍙互杞绘澗瀹炵幇浠ｇ爜楂樹寒銆傚涔堟縺鍔ㄤ汉蹇冪殑鍔熻兘锛岀幇鍦ㄥ湪Chrome105涓凡缁忔寮忔敮鎸佷簡锛堟棤闇€寮€鍚疄楠屾€у姛鑳斤級锛屼竴璧锋潵瀛︿範鍚?.浼厓绱?:highlight()鑷畾涔変换鎰忔枃瀛楁牱寮忛渶瑕丆SS鍜孞S銆傚厛鐪婥SS閮ㄥ垎锛屾柊澧炰竴涓吉鍏冪礌锛屽緢绠€鍗曪細::highlight(custom-highlight-name){color:red}绫讳技浜?:selection绛変吉鍏冪礌锛屽彧鏀寔閮ㄥ垎鏂囨湰-鐩稿叧鏍峰紡锛屽textcolorcolorbackgroundcolorbackground-colortextdecorationtext-decorationtextshadowtext-shadowtextstroke-webkit-text-stroketextfill-webkit-text-fill-colorattention,attention,attention涓嶆敮鎸乥ackground-image锛屽嵆gradient绫讳篃涓嶆敮鎸併€傜劧鑰岋紝鍙煡閬撹繖涓吉绫绘槸娌℃湁鐢ㄧ殑銆傚ス杩橀渶瑕佷竴涓€滃弬鏁扳€濓紝灏辨槸涓婇潰鐨刢ustom-highlight-name锛屼篃灏辨槸楂樹寒鐨勫悕瀛椼€傝繖鏄€庝箞鍙戠敓鐨勶紵鎴栬€呮崲鍙ヨ瘽璇达紝濡備綍璇嗗埆椤甸潰涓婇渶瑕佽嚜瀹氫箟鏍峰紡鐨勬枃鏈儴鍒嗭紵杩欏氨闇€瑕佸€熷姪涓嬮潰鐨勫唴瀹规潵鐪嬭繖涓€滃弬鏁扳€濇槸濡備綍鐢熸垚鐨勶紝杩欐槸閲嶇偣2銆佷粙缁岰SSCustomHighlightAPI涔嬪墠锛屽缓璁粩缁嗛槄璇昏繖绡囨枃绔狅細鈥滃厜鏍団€濆拰鈥滈€夋嫨鈥濅腑鐨剋eb涓殑澶ч儴鍒嗘搷浣滃叾瀹炲拰杩欎釜鍘熺悊鏄竴鏍风殑锛屽彧鏄鑾峰彇鍒扮殑閫夊尯杩涜浜嗚繘涓€姝ョ殑澶勭悊锛屽叿浣撴楠ゅ涓嬶細1銆佸垱寤洪€夊尯锛堝叧閿偣锛夐鍏堬紝閫氳繃Range瀵硅薄锛屽氨鍍忕敤榧犳爣婊戝姩閫夊尯涓€鏍凤紝杩欐槸鏈€澶嶆潅鐨勯儴鍒嗭紝渚嬪constparentNode=document.getElementById("foo");constrange1=newRange();range1.setStart(parentNode,10);range1.setEnd(parentNode,20);constrange2=newRange();range2.setStart(parentNode,40);range2.setEnd(parentNode,60);杩欐牱灏卞彲浠ュ緱鍒伴€夋嫨瀵硅薄range1锛宺ange22銆傚垱寤洪珮浜劧鍚庡疄渚嬪寲鍒涘缓鐨勯€夋嫨楂樹寒锛岄渶瑕佷娇鐢ㄥ埌楂樹寒瀵硅薄consthighlight=newHighlight(range1,range2,...);褰撶劧浣犱篃鍙互鍒涘缓澶氫釜consthighlight1=newHighlight(user1鑼冨洿1锛岀敤鎴?鑼冨洿2)锛沜onsthighlight2=newHighlight(user2Range1,user2Range2,user2Range3);杩欐牱灏卞彲浠ュ緱鍒伴珮浜璞ighlight1锛宧ighlight23銆傛敞鍐岄珮浜帴涓嬫潵闇€瑕佸皢瀹炰緥鍖栫殑楂樹寒瀵硅薄閫氳繃CSS.Highlight](https://developer.mozilla.org...))娉ㄥ唽鍒伴〉闈腑锛屾湁鐐圭被浼间簬Map瀵硅薄CSS.highlights鐨勬搷浣溿€傝缃紙鈥滅獊鍑烘樉绀?鈥濓紝绐佸嚭鏄剧ず1锛夛紱CSS.highlights.set("highlight2",highlight2);鐩墠鍏煎鎬ф瘮杈冨樊锛岄渶瑕侀澶栧垽鏂璱f(CSS.highlights){//...supportCSS.highlights}娉ㄦ剰涓婇潰娉ㄥ唽鐨勯敭鍚嶏紝highlight1鏄笂涓€鑺傛彁鍒扮殑楂樹寒鍚嶏紝涔熷氨鏄湪CSSRequired"parameters"涓?.鑷畾涔夋牱寮忔渶鍚庯紝灏嗗畾涔夌殑楂樹寒鍚嶇О涓?:highlight缁撳悎璧锋潵锛岃繖鏍峰氨鍙互鑷畾涔夐€変腑鐨勬牱寮忎簡::highlight(highlight1){background-color:yellow;color:black;}浠ヤ笂灏辨槸鏁翠釜杩囩▼锛屾湁鐐瑰鏉傦紝浣嗘槸寰堝ソ鐞嗚В銆傚叧閿槸绗竴姝ュ垱寤洪€夊尯鐨勮繃绋嬶紝鏄渶澶嶆潅鐨勩€傚缓璁啀浠旂粏鐪嬭繖绡囨枃绔狅細web涓殑鈥滃厜鏍団€濆拰鈥滈€夋嫨鍖哄煙鈥濓紝浣跨敤涓嬮潰鐢ㄤ竴寮犲浘鎬荤粨涓€涓嬪師鐞嗐€傝鎴戜滑鐪嬩笅闈㈢殑涓€浜涗緥瀛愩€?銆佸僵铏规枃瀛椾笅闈㈡垜浠潵瀹炵幇涓€涓嬫枃绔犲紑澶寸殑鎻掔敾鏁堟灉锛屽僵铏规枃瀛楃殑鏁堟灉涓€鍏辨湁7绉嶉鑹诧紝鏂囧瓧渚濇鍙樿壊锛屽惊鐜線澶嶏紝鍙湁涓€涓爣绛?pid="rainbow-text">CSSCustomHighlightAPI
涓€鍏辨湁7绉嶈繖閲岀殑棰滆壊锛屾墍浠ラ渶瑕佸垱寤?涓珮浜尯鍩燂紝鍙互鍏堝畾涔夐珮浜瓹SS锛屽涓?:highlight(rainbow-color-1){color:#ad26ad;鏂囨湰淇グ锛氫笅鍒掔嚎锛泒::highlight(rainbow-color-2){棰滆壊锛?5d0a99;鏂囨湰瑁呴グ锛氫笅鍒掔嚎锛泒::highlight(rainbow-color-3){棰滆壊锛?0000ff锛涙枃鏈慨楗帮細涓嬪垝绾匡紱}::highlight(rainbow-color-4){棰滆壊锛?07c607;鏂囨湰淇グ锛氫笅鍒掔嚎锛泒::highlight(rainbow-color-5){棰滆壊锛?b3b308;鏂囨湰淇グ锛氫笅鍒掔嚎锛泒::highlight(rainbow-color-6){棰滆壊锛?ffa500;鏂囨湰淇グ锛氫笅鍒掔嚎锛泒::highlight(rainbow-color-7){棰滆壊锛?ff0000;鏂囨湰淇グ锛氫笅鍒掔嚎锛泒鐜板湪鑲畾涓嶄細鏈夊彉鍖栦簡锛屽洜涓哄湪鍒涘缓閫夋嫨鍖哄煙涔嬪墠锛屽厛灏濊瘯鍒涘缓涓€涓珮浜尯鍩燂紝姣斿绗竴涓枃鏈琧onsttextNode=document.getElementById("rainbow-text").firstChild;if(CSS.highlights){甯搁噺鑼冨洿=鏂拌寖鍥?);range.setStart(textNode,0);//閫夋嫨璧峰鐐箁ange.setEnd(textNode,1);//閫夋嫨缁撴潫constHighlight=newHighlight(range);CSS.highlights.set(`rainbow-color-1`,Highlight);}鏁堟灉濡備笅寰幆鍒涘缓7涓珮浜尯鍩焎onsttextNode=document.getElementById("rainbow-text").firstChild;if(CSS.highlights){const浜偣=[];for(leti=0;i<7;i++){//涓烘瘡绉嶉鑹插疄渚嬪寲涓€涓狧ighlight瀵硅薄constcolorHighlight=newHighlight();highlights.push(colorHighlight);//娉ㄥ唽楂樹寒CSS.highlights.set(`rainbow-color-${i+1}`,colorHighlight);}//閬嶅巻鏂囨湰鑺傜偣for(leti=0;i
Search闃呮枃鏃椾笅鍖呮嫭QQ闃呰銆佽捣鐐逛腑鏂囩綉銆佹柊涓戒紶濯掔瓑琛屼笟鐭ュ悕鍝佺墝銆傝仛闆嗕簡寮哄ぇ鐨勫垱浣滆€呴樀钀ュ拰涓板瘜鐨勪綔鍝佸偍澶囷紝娑电洊200澶氫釜鍐呭绫诲埆銆傝鐩栨暟浜跨敤鎴凤紝鎴愬姛杈撳嚭銆婂簡浣欏勾銆嬨€婅禈濠裤€嬨€婇鍚圭伅銆嬨€婂叏鑱岄珮鎵嬨€嬨€婃枟缃楀ぇ闄嗐€嬨€婄悈鐞婃銆嬬瓑涓€澶ф壒浼樼鐨勭綉缁淚P锛屽苟鏀圭紪鎴愬姩婕€佸奖瑙嗐€佹父鎴忕瓑澶氭牸寮忎骇鍝併€?/p>
鈥嬧€嬪師杩炶浇浜庤捣鐐逛腑鏂囩綉锛屾槸鍗楁淳涓夊彅鎴愬悕鐨勪唬琛ㄤ綔銆?015骞达紝缃戝墽寮€鎾鏃ョ偣鍑婚噺鐮翠嚎锛屽紑鍚簡鐩楀鏂囧IP鍖栧厓骞淬€傝鐗囦簬2016骞翠笂鏄狅紝鐢变簳鏌忕劧銆侀箍鏅椼€侀┈鎬濈函绛変富婕旓紝绱绁ㄦ埧10浜垮厓銆?/p>
銆婂簡浣欏勾銆嬫槸闃呮枃闆嗗洟鐧介噾浣滃姣涘€殑浣滃搧銆?007骞磋捣鍦ㄨ捣鐐逛腑鏂囩綉杩炶浇锛屼竴鐩翠綅鍒楀巻鍙茬被鏈€鐖卞墠浜斿悕銆傚墽鏈敼缂栨垚涓?019骞寸殑鐜拌薄绾т綔鍝侊紝鎾嚭鏈熼棿寰崥鍑虹幇娆℃暟瓒呰繃100娆°€傝吘璁棰戝拰鐖卞鑹哄弻骞冲彴鎬昏鐪嬮噺瓒呰繃160浜挎銆傝幏寰楃26灞婄櫧鐜夊叞濂栨渶浣崇紪鍓э紙鏀圭紪锛夈€佹渶浣崇敺閰嶈涓ら」澶у銆?/p>
銆婇鍚圭伅銆嬫槸澶╀笅闇稿満鍒涗綔鐨勭粡鍏哥洍澧撴偓鐤戝皬璇达紝鍦ㄨ捣鐐逛腑鏂囩綉杩炶浇銆傚厛鍚庢敼缂栦簡婕敾銆佹父鎴忋€佺數褰便€佺綉缁滅數瑙嗗墽锛屽潎鍙栧緱浜嗕笉淇楃殑鎴愮哗銆傛槸褰撲箣鏃犳劎鐨勮秴绾P銆?/p>
缁忚繃绠€鍗曠殑缇庡寲锛屾晥鏋滃涓嬬劧鍚庣洃鍚緭鍏ユ锛岄亶鍘嗘枃鏈妭鐐癸紙鎺ㄨ崘浣跨敤鍘熺敓treeWalker锛屽綋鐒舵櫘閫氶€掑綊涔熷彲浠ワ級锛屽垱寤洪€夊尯area鏍规嵁鎼滅储璇嶏紝璇︾粏浠ｇ爜濡備笅鏁扮粍consttreeWalker=document.createTreeWalker(article,NodeFilter.SHOW_TEXT);constallTextNodes=[];letcurrentNode=treeWalker.nextNode();while(currentNode){allTextNodes.push(currentNode);currentNode=treeWalker.nextNode();}//鐩戝惉杈撳叆浜嬩欢query.addEventListener("input",()=>{//妫€鏌ユ槸鍚︽敮鎸丆SS.highlightsif(!CSS.highlights){article.textContent="CSSCustomHighlightAPInotsupported.";return;}//娓呴櫎鏈€鍚庣殑楂樹寒CSS.highlights.clear();//娓呯┖鍒ゆ柇conststr=query.value.trim().toLowerCase();if(!str){return;}//鏌ユ壘鏄惁鎵€鏈夋枃鏈妭鐐归兘鍖呭惈鎼滅储璇峜onstranges=allTextNodes.map((el)=>{return{el,text:el.textContent.toLowerCase()};}).map(({text,el})=>{constindices=[];璁﹕tartPos=0;while(startPos{constrange=newRange();range.setStart(el,index);range.setEnd(el,index+str.length);杩斿洖鑼冨洿;});});//鍒涘缓楂樹寒瀵硅薄constsearchResultsHighlight=newHighlight(...ranges.flat());//娉ㄥ唽楂樹寒CSS.highlights.set("search-results",searchResultsHighlight);});鏈€鍚庨€氳繃CSS::highlight(search-results){background-color:#f06;璁剧疆楂樹寒棰滆壊color:white;}瀹炴椂鎼滅储鏁堟灉濡備笅瀹屾暣浠ｇ爜鍙互鍦ㄤ互涓嬩换涓€閾炬帴鏌ョ湅锛氾紙娉ㄦ剰闇€瑕丆hrome105+锛塁SS楂樹寒鎼滅储锛坈odepen.io锛塁SS楂樹寒鎼滅储锛坮unjs.work)涔熷彲浠ユ妸楂樹寒鏁堟灉鏀规垚娉㈡氮绾?:highlight(search-results){text-decoration:underlinewavy#f06;}鏁堟灉濡備笅锛屾槸涓嶆槸涔熷彲浠ュ綋閿欏瓧鏍囪浣跨敤锛熼櫎浜嗗彲浠ラ伩鍏峝om鎿嶄綔甯︽潵鐨勪究鍒╀箣澶栵紝鎬ц兘涔熷彲浠ユ湁寰堝ぇ鐨勬彁鍗囷紝姣曠珶鍒涘缓鍜屽垹闄om涔熸槸涓€涓ぇ琛ㄦ紨鑰呫€備笅闈㈡槸涓€涓祴璇昫emo锛屾惉鑷猦ttps://ffiori.github.io/highlight-api-demos/demo-performance.html娴嬭瘯浠ｇ爜鍙互鍦ㄤ互涓嬩换涓€閾炬帴鏌ョ湅锛欻ighlightperformancedemo(codepen.io)楂樹寒鎬ц兘demo(runjs.work)娴嬭瘯缁撴灉濡備笅鍦?0000涓妭鐐圭殑鎯呭喌涓嬶紝涓よ€呯浉宸?00鍊嶏紒鑰屼笖鏁板瓧瓒婂ぇ锛屾€ц兘宸窛瓒婃槑鏄撅紝鐢氳嚦鐩存帴瀵艰嚧娴忚鍣ㄥ崱椤匡紒5.浠ｇ爜楂樹寒缂栬緫鍣ㄦ渶鍚庢潵鐪嬩竴涓潪甯稿疄鐢ㄧ殑渚嬪瓙锛屽彲浠ュ緢鏂逛究鐨勫疄鐜颁竴涓唬鐮侀珮浜紪杈戝櫒銆傚亣璁綡TML缁撴瀯鏄繖鏍风殑锛屽緢绠€鍗曪紝灏辨槸涓€涓函鏂囨湰鏍囩ul{min-height:0;}.sub{display:grid;缃戞牸妯℃澘琛岋細0fr锛涜繃娓★細0.3s锛沷verflow:hidden;}:checked~.sub{grid-template-rows:1fr;}.txt{animation:color.001s.5linearforwards;}@keyframescolor{from{color:var(--c1)}鍒皗color:var(--c2)}}simple瀵瑰叾杩涜淇敼锛岃缃负鍙紪杈戝厓绱犮€傜紪杈戝櫒{绌虹櫧锛氶鍖呰锛?webkit-user-modify:read-write-plaintext-only;/*璇诲啓绾枃鏈?/}鏁堟灉濡備笅閭ｄ箞锛屽浣曡杩欎簺浠ｇ爜楂樹寒鍛紵杩欏氨闇€瑕佸叧閿瘝鍒嗘瀽鍜屽唴瀹规彁鍙栥€傛垜浠彲浠ヤ娇鐢ㄧ幇鏈夌殑浠ｇ爜楂樹寒搴擄紝渚嬪highlight.js銆俬ljs.highlight(pre.textContent,{language:'css'})._emitter.rootNode.children閫氳繃杩欎釜鏂规硶鍙互寰楀埌CSS璇█鐨勫叧閿瓧鍜岀被鍨嬶紝涓嬮潰绠€鍗曡В閲婁竴涓嬶紝濡傛灉鏄函鏂囨湰锛岃繖鏄竴涓暟缁勶紝琛ㄧず鏅€氬瓧绗︺€傚鏋滄槸瀵硅薄锛屽垯琛ㄧず鍏抽敭瀛椼€傛瘮濡傜涓€涓紝children涓殑ul鏄叧閿瓧锛宼ype鏄痵elector-tag锛屾槸涓€涓€夋嫨鍣ㄣ€傛澶栵紝杩樻湁attribute銆乶umber銆乻elector-class绛夊悇绉嶇被鍨嬨€傛湁浜嗚繖浜涘叧閿瓧锛屾垜浠氨鍙互鍗曠嫭閫夋嫨杩欎簺鏂囨湰锛岀劧鍚庣敤涓嶅悓鐨勯鑹茬獊鍑烘樉绀哄畠浠€傛帴涓嬫潵闇€瑕侀亶鍘嗕唬鐮佸唴瀹癸紝鏂规硶绫讳技锛屽涓媍onstnodes=pre.firstChildconsttext=nodes.textContentconsthighlightMap={}letstartPos=0;words.filter(el=>el.scope)銆俧orEach(el=>{conststr=el.children[0]constscope=el.scopeconstindex=text.indexOf(str,startPos);if(index<0){return}constitem={start:index,scope:scope,end:index+str.length,str:str}if(highlightMap[scope]){highlightMap[scope].push(item)}else{highlightMap[scope]=[item]}startPos=index+str}.length;})Object.entries(highlightMap).forEach(function([k,v]){constranges=v.map(({start,end})=>{constrange=newRange();鑼冨洿銆俿etStart(nodes,start);range.setEnd(nodes,end);杩斿洖鑼冨洿;});consthighlight=newHighlight(...ranges.flat());CSS.highlights.set(k,highlight);})}highlights(code)code.addEventListener('input',function(){highlights(this)})鏈€鍚庢牴鎹笉鍚岀殑绫诲瀷瀹氫箟涓嶅悓鐨勯鑹诧紝濡備笅::highlight(built_in锛墈棰滆壊锛?c18401锛泒::highlight锛堣瘎璁猴級{棰滆壊锛?a0a1a7锛涘瓧浣撴牱寮忥細鏂滀綋锛泒::highlight(number),::highlight(selector-class){棰滆壊锛?986801;}::highlight(attr){棰滆壊锛?986801锛泒::highlight锛堝瓧绗︿覆锛墈棰滆壊锛?50a14f锛泒::highlight(selector-pseudo){棰滆壊锛?986801;}::highlight锛堝睘鎬э級{棰滆壊锛?50a14f锛泒::highlight锛堝叧閿瓧锛墈棰滆壊锛?a626a4锛涜繖鏍峰氨寰楀埌浜嗕竴涓畝鍗曠殑鏀寔浠ｇ爜楂樹寒鐨勭紪杈戝櫒銆備笌浼犵粺鐨勭紪杈戝櫒鐩告瘮锛岃繖鏄竴涓函鏂囨湰缂栬緫鍣紝闈炲父杞婚噺绾с€傞珮浜椂涓嶄細褰卞搷鍏夋爣锛屽洜涓轰笉浼氱敓鎴愭柊鐨刣om锛屾€ц兘瓒呭ソ馃憤馃徎瀹屾暣浠ｇ爜鍙互鍦ㄤ互涓嬩换涓€閾炬帴鏌ョ湅锛欳SS楂樹寒缂栬緫鍣紙codepen.io锛塁SS楂樹寒缂栬緫鍣紙runjs.work)6銆佹渶鍚庢€荤粨涓€涓嬶紝浠ヤ笂鏄叧浜嶤SSCustomHighlightAPI鐨勭敤娉曞拰搴旂敤瀹炰緥銆傚洖椤句竴涓嬩娇鐢ㄦ楠わ細鍒涘缓閫夊尯锛宯ewRange鍒涘缓highlight锛宯ewHighlight娉ㄥ唽highlight锛孋SS.highlights.set鑷畾涔夋牱寮忥紝::highlight()涓庝紶缁熺殑鏍囩浣跨敤鏂瑰紡鐩告瘮锛屼紭鐐瑰澶氾紝琚娇鐢ㄥ湪鏇村箍娉涚殑鍦烘櫙涓€傚緢澶氭椂鍊檇om涓嶈兘淇敼鎴栬€呮垚鏈瀬楂橈紝鎬ц兘鏇村ソ銆傞伩鍏嶄簡鎿嶄綔dom甯︽潵鐨勯澶栧紑閿€锛屽湪dom涓湁鏇村鐨勬儏鍐典笅鎬ц兘鐩稿樊鑷冲皯100鍊嶄笖鍑犱箮娌℃湁鍓綔鐢紝鍙互鏈夋晥闄嶄綆DOM鍙樺寲甯︽潵鐨勫叾浠栧奖鍝嶃€備緥濡傦紝鍏夋爣閫夋嫨鐨勫鐞嗗疄闄呬笂鏄敱DOM鍙樺寲寮曡捣鐨勶紝鑰孒ighlightAPI鍙互鏈夋晥閬垮厤杩欎釜闂銆傚綋鐒讹紝涔熸湁涓€浜涚己闄枫€傚洜涓哄彧鑳芥洿鏀逛笌鏂囨湰鐩稿叧鐨勬牱寮忥紝鎵€浠ュ瓨鍦ㄤ竴浜涢檺鍒躲€傝繖涓渶瑕佹潈琛′竴涓嬨€傜洰鍓嶅吋瀹规€ц繕涓嶅銆傚畠浠呴€傜敤浜庡唴閮ㄩ」鐩€傝鏈熷緟鏈€鍚庛€傚鏋滆寰楄繕涓嶉敊锛屽鏈夊府鍔╃殑璇濓紝娆㈣繋鐐硅禐銆佹敹钘忋€佽浆鍙戔潳鉂も潳娆㈣繋鍏虫敞鎴戠殑鍏紬鍙凤細鍓嶇澶т睛鎺㈣繖绡囨枃绔犲弬鍔犱簡銆奡egmentFault鎬濈淮鍐欎綔鎸戞垬璧涖€嬶紝浣犲鏋滄偍姝ｅ湪闃呰锛屾杩庡姞鍏ャ€?/p>
