词典内短语检索 js脚本 通用

baodi

输入搜索的短语，回车触发搜索。
搜索前：

+ y3 @* K; Q8 M; ^* e
搜索后：点击即可跳转对应的短语，非常简单快速

. U# R7 Q) S( @; B
4 x. v& W# k" E6 L0 \; H出于查询词典短语的需求，写了一个脚本，用了许久，还挺好用，特此分享。
3 x% {( u* I, x+ e/ a; L# s/ i0 k*但不是加入即用的，需要一点css 选择器样式的了解，才能修改成自己用的词典。
& L5 ^1 R- Q7 R1 h8 t
, [. a* I1 m: o$ y来由：
0 v: ~( F6 }0 A5 N, {! s有些词典并没有给短语一个词条，比如想搜索period of time，就只能先搜索time词条，然后打开软件的页内搜索功能搜索，但在我用的词典内ldoce6有18处出现period of time，那么最糟糕的情况下要切换18次才能找到自己想要的释义。
5 E) p( i8 R8 j! W; R" f. m而使用了我这个脚本，就可以偷懒，搜索“per”，然后就出来2个结果，其中一个就是period of time的条目，点击即达词典对应位置。
, c: Q8 V& a6 M% I( F
& ]$ \; c* x  ]3 ?, I6 A2 N- J使用方法：
& V$ c, }$ b5 D" I. E3 O在词典自带的.js为后缀的文件最后，加入以下代码并修改。
根据对应的词典，需要针对性地修改。
3 N. s# f5 H4 l5 l- B4 t修改代码第42行的const selector = [".phrvbhwd",".lexunit"…
! R- O! D) r& x% @通过电脑平台的goldendict或安卓平台 无限词典app的词典服务器，甚至解包词典。找到对应的短语在词典的样式中对应的css选择器，比如我用的ldoce6中有些短语对应.phrvbhwd这个选择器，有些对应.lexunit这个选择器，等等，修改完成后。
$ d5 j' v, [3 D* K保存.js文件，一般来说软件会自动挂载这个新的.js文件替换词典原版加载的.js文件。
) n5 Z6 R9 [$ S8 P
- [( G! J( r! |6 R6 k网友互助？：因为这玩意要从词典的条目中筛选出对应的css选择器，对于一些朋友可能还是太难，所以希望网友在回复帖子里附上自己使用的词典修改后“完整的”js文件的百度云盘（文件本就不大，百度云盘最稳妥）链接，注意是完整的js文件。然后在这层楼的点评中附上 词典名称+对应楼层，方便其他人检索。

附加：css选择器学习教程：runoob教程

- ]% T5 t) [' e8 |4 U代码：

1. /*版本 v1.0*/
   $ g7 I- r# R: T$ A3 @# s2 V8 C
2. function myscript(){
   1 W* A& S& U2 u$ l9 g8 x) z
3. const style = document.createElement("style");
   - o7 `% J- @2 l2 H
4. style.innerText = `
   
5. /*css样式，可以将这部分样式放到css文件中*/
   + d2 N9 _4 R% H3 ~3 A
6. .blink_me {
   9 i6 B# Z0 }: _' P% r
7.   /*scroll-margin-top: 18px;锚点的配置*/
   , j  B! w! k1 k$ w" F& O$ c$ y
8. 
   5 g& F' \7 y$ h" a* B
9.   padding-top: 18px;
   9 A, Q: L7 i4 u) Q8 g9 d
10.   margin-top: -18px;
    
11.   
    
12.   animation: blinker 1s linear infinite;
    ( e7 R" W% S0 ^4 H# @3 \& o& m
13. }
    ' g, I; z" Y$ G9 {1 Y$ L
14. 
    
15. @keyframes blinker {
    $ H3 t, e' s  T- G
16.   50% {
    
17.     opacity: 0;
    
18.   }
    5 A% k% b8 o( H# N$ T" k
19. }
    
20. input[type="search"] {
    
21.     margin: 3px;
    4 x0 P2 E, U; B' K6 h% q$ L  K# r5 y
22. }
    5 S" G$ {# ?/ ?
23. #search_result ul{
    
24.     margin: 3px 3px;
    
25.     padding: 0;
    ) c! B* X8 O) Z
26. }
    * c# ]& O8 q$ v+ z
27. #search_result a{
    
28.     font-weight: bold;
      @$ g/ r6 h; T$ G2 K% h, R
29. }
    
30. /*css样式-结束*/
    
31. `;
    
32. document.head.append(style);
    , b  K% Z( V% N3 k$ b+ \
33. 
    , Z( d/ _9 `9 X3 V; i
34. const search_bar = document.createElement('input');
    + d% a/ ]7 \% d0 ^7 d1 o
35. search_bar.type = 'search';
    
36. search_bar.id = 'search_bar'
    
37. search_bar.placeholder = '搜索短语，回车搜索';
    & M# P8 {* x1 r3 s9 M3 p/ E
38. const matched = document.createElement('div');
    
39. matched.id = 'search_result';
    
40. 
    
41. //词典中要搜索的元素对应的class名称,这里是ldoce6词典的短语对应的css选择器，你需要改成你用的词典的短语对应的选择器。
    
42. const selector = [".phrvbhwd",".lexunit",".lexvar",".propformprep",".propform",".collo",".syn",".relatedwd",".reflex"];
    
43. 
    
44. const march_nodes = [];
    ; _( Y, F1 e2 Z& C- @
45. for (const sel of selector){
    - ]6 e3 ^& B7 ?% S; u
46.   document.querySelectorAll(sel).forEach((e)=>{
    4 v9 z- o& F" G
47.     march_nodes.push(e)
    
48.   })
    
49. }
    5 Y  L5 o& t$ u& y" u9 W
50. myscript.pos = 1;
    
51. search_bar.addEventListener('keydown',function(e){
    
52.   if (e.keyCode == 13) {
    ) U# }; M# k: Z- i( N' q: w
53.     let pos = myscript.pos;
    
54.     let matched_html = ''
    
55.     march_nodes.forEach((ele)=>{
    
56.       if(ele.innerText.toLocaleLowerCase().indexOf(search_bar.value.toLocaleLowerCase()) === -1){
    / A, Y- N* M3 {: l
57.         return
    ) v0 W' t, l+ N1 N+ A) N2 `
58.       };
    + P$ h* D: X# S: N' c. F: \
59.       
    8 ?/ w' |- ^! K4 L; [$ u. z
60.       const a_html = ele.innerText.replace(new RegExp('(' + search_bar.value.trim() + ')', "gi"),'<mark>$1</mark>')
    5 e; {) `7 }& k7 m
61. 
    
62.       if(!ele.id){
    
63.         ele.id = 'matched_' + pos++;
    ( ]( p: b0 U) ?/ F3 m$ U
64.       }
    
65. 
    9 K0 Z6 B, W8 a, Y& W
66.       matched_html += `
    
67.       <ul><a href="#${ele.id}">${a_html}</a></ul>
    % `. x: [+ m$ X1 e5 ?; @
68.       `
    / p) [1 R+ ^7 ^, [6 l3 i4 X) w
69.     })
    
70.     if (matched_html === ''){
    
71.       matched_html += `
    - \0 o' i" ~& f  @# e
72.       <ul><a>无匹配短语</a></ul>
    8 k" H6 J$ `; e- G: j2 c% p8 Q3 p0 x
73.       `
    
74.     }
    
75.     myscript.pos = pos;
    
76.     matched.innerHTML = matched_html;
    
77.   }
    
78. })
    
79. 
    : v7 K* X$ @) Y( @, P$ t0 J4 B
80. matched.addEventListener('click',function(e){
    
81.   const target = (e.target.tagName == 'MARK') ? e.target.parentElement : e.target;
    9 L% h( X% Q9 k9 _( P( O
82.   if(target.href.split('#').length <= 1){
    
83.     return;
    
84.   }
    
85.   let t = document.getElementById(target.href.split('#')[1]);
    ' G! U3 [& R7 `& u1 K
86.   if(t){
    
87.     t.classList.add('blink_me');
    
88.     setTimeout(()=>{t.classList.remove('blink_me');},2000)
      @2 C9 y2 T; @, [) _7 V  @" |. f
89.   }
    8 i+ i% J: g3 D
90. })
    
91. 
    
92. if(!document.getElementById('search_result')){
    
93.   document.body.insertBefore(matched,document.body.firstChild)
    * F9 G/ M5 ^, ]4 L5 `" h1 x1 c2 L
94.   document.body.insertBefore(search_bar,document.body.firstChild)
    
95. }
    4 F. `5 u$ j/ B: ]5 z" ]% e
96. }
    6 h* s, f8 ?- U4 P, B/ A! P$ Q# O
97. setTimeout(myscript,0);

复制代码

代码复制不了的话，可以下载附件：

! W9 `+ y% a' Q

7 P- e5 |. }) v9 _
好久没来论坛了。

geckopapa

谢谢分享。装在试试看。