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

baodi

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


搜索后：点击即可跳转对应的短语，非常简单快速
; ~; @7 w  D" x
; A' w6 _- V; k( v0 Q
# E, @$ C1 X6 B8 L  t; g& D& V出于查询词典短语的需求，写了一个脚本，用了许久，还挺好用，特此分享。
9 C& q) b& g& w- n*但不是加入即用的，需要一点css 选择器样式的了解，才能修改成自己用的词典。
3 I" e, C: M# ~6 C, n
; k3 [% u* \$ F+ r7 X来由：
) }0 t5 Z9 q, t- L5 z" {4 U9 p- ~有些词典并没有给短语一个词条，比如想搜索period of time，就只能先搜索time词条，然后打开软件的页内搜索功能搜索，但在我用的词典内ldoce6有18处出现period of time，那么最糟糕的情况下要切换18次才能找到自己想要的释义。
/ M- ?. t1 X, I" Z* Z: ~而使用了我这个脚本，就可以偷懒，搜索“per”，然后就出来2个结果，其中一个就是period of time的条目，点击即达词典对应位置。

# [* k5 \- y2 W7 E8 A使用方法：
+ _3 @8 J5 a0 S) j, Z在词典自带的.js为后缀的文件最后，加入以下代码并修改。
根据对应的词典，需要针对性地修改。
修改代码第42行的const selector = [".phrvbhwd",".lexunit"…
: ~4 N2 G4 @$ c7 g1 H' ^6 B通过电脑平台的goldendict或安卓平台 无限词典app的词典服务器，甚至解包词典。找到对应的短语在词典的样式中对应的css选择器，比如我用的ldoce6中有些短语对应.phrvbhwd这个选择器，有些对应.lexunit这个选择器，等等，修改完成后。
6 K8 u) @- e. i4 C保存.js文件，一般来说软件会自动挂载这个新的.js文件替换词典原版加载的.js文件。

: a% A3 {1 B0 a1 B; V网友互助？：因为这玩意要从词典的条目中筛选出对应的css选择器，对于一些朋友可能还是太难，所以希望网友在回复帖子里附上自己使用的词典修改后“完整的”js文件的百度云盘（文件本就不大，百度云盘最稳妥）链接，注意是完整的js文件。然后在这层楼的点评中附上 词典名称+对应楼层，方便其他人检索。
  p3 n5 d) L4 D' u6 V# a
8 h7 o  y9 L  ^附加：css选择器学习教程：runoob教程

, }9 v) g' E* N. y4 l代码：

1. /*版本 v1.0*/
   
2. function myscript(){
   3 E- l" b; a4 U; b4 b( ]
3. const style = document.createElement("style");
   # Q0 k5 w) u* O& D$ b
4. style.innerText = `
   
5. /*css样式，可以将这部分样式放到css文件中*/
   0 K# {5 H$ `  N5 }8 M! `
6. .blink_me {
   
7.   /*scroll-margin-top: 18px;锚点的配置*/
   
8. 
   
9.   padding-top: 18px;
   
10.   margin-top: -18px;
    
11.   
    + u4 j. z) Q. r! h4 r, M
12.   animation: blinker 1s linear infinite;
    ( J( a2 b& ~1 l( n' k5 n
13. }
    : j6 G+ E6 N9 Y5 k" U7 p
14. 
    ' O, u% E% x+ O( `% H- i
15. @keyframes blinker {
    ( k0 z: {4 M5 x3 n) Z! L. F
16.   50% {
    
17.     opacity: 0;
    
18.   }
    
19. }
    
20. input[type="search"] {
    
21.     margin: 3px;
    
22. }
    
23. #search_result ul{
    
24.     margin: 3px 3px;
    0 g% i: {! b! d) ?7 g" i
25.     padding: 0;
    
26. }
    
27. #search_result a{
    , s  w# v; t8 o8 K$ c3 y) l; K
28.     font-weight: bold;
    5 V# T& |3 e( a% W4 q$ P
29. }
    8 g7 k) x( E6 R4 [
30. /*css样式-结束*/
    / t: ~7 A6 j* K* L
31. `;
    
32. document.head.append(style);
    * i$ v$ M& n. C
33. 
    , }& {0 n% K0 N1 Q
34. const search_bar = document.createElement('input');
    $ D9 K8 `. u9 Q) F! A$ G. f( u- Y
35. search_bar.type = 'search';
    
36. search_bar.id = 'search_bar'
    
37. search_bar.placeholder = '搜索短语，回车搜索';
    % `" Z+ H! s7 y# Q
38. const matched = document.createElement('div');
    
39. matched.id = 'search_result';
    
40. 
    ( j. F$ o  T8 k
41. //词典中要搜索的元素对应的class名称,这里是ldoce6词典的短语对应的css选择器，你需要改成你用的词典的短语对应的选择器。
    
42. const selector = [".phrvbhwd",".lexunit",".lexvar",".propformprep",".propform",".collo",".syn",".relatedwd",".reflex"];
    8 T1 R6 ^. w  D2 x* d
43. 
    * |: C% f- L% Z  H! }$ h
44. const march_nodes = [];
    0 u, Y  L) @. O& i8 B7 D- [; k
45. for (const sel of selector){
    
46.   document.querySelectorAll(sel).forEach((e)=>{
    : {/ ], k  U# C
47.     march_nodes.push(e)
    
48.   })
    
49. }
    2 S  n8 p1 c) H
50. myscript.pos = 1;
    9 m1 |6 Q3 s% J9 p  p  r- a
51. search_bar.addEventListener('keydown',function(e){
    
52.   if (e.keyCode == 13) {
    
53.     let pos = myscript.pos;
    ; f$ H5 n% e6 k, F/ j) u. V: K
54.     let matched_html = ''
    
55.     march_nodes.forEach((ele)=>{
    
56.       if(ele.innerText.toLocaleLowerCase().indexOf(search_bar.value.toLocaleLowerCase()) === -1){
    1 _- C: h% P  T" P5 X$ K
57.         return
    
58.       };
    " @; {8 r3 R! J7 e) U- Y
59.       
    
60.       const a_html = ele.innerText.replace(new RegExp('(' + search_bar.value.trim() + ')', "gi"),'<mark>$1</mark>')
    / Y/ l9 G0 Z6 Q# p+ l0 }
61. 
    
62.       if(!ele.id){
    
63.         ele.id = 'matched_' + pos++;
    ) R* j* I5 z1 N' f, H  J* ]+ P
64.       }
    : o0 N' `" Y! W9 Z6 |" u: }9 i
65. 
    , E' K# Q! s+ h' M3 C  Z1 L
66.       matched_html += `
    
67.       <ul><a href="#${ele.id}">${a_html}</a></ul>
    
68.       `
    , n4 d" x% R( ^* j6 R+ P6 p1 e
69.     })
    6 n5 t" s4 X( V: R- ]
70.     if (matched_html === ''){
    
71.       matched_html += `
    / u/ _  A) r8 h4 l8 n
72.       <ul><a>无匹配短语</a></ul>
    
73.       `
    * P8 B8 F; G2 j0 S0 n, t8 X! v1 R
74.     }
    
75.     myscript.pos = pos;
    : P" f, q! o$ N9 ~
76.     matched.innerHTML = matched_html;
    
77.   }
    # @1 t- w3 _9 n. C
78. })
    ( r: W1 t) C5 q% j0 ^: t0 D8 N
79. 
    
80. matched.addEventListener('click',function(e){
    ( i# R: x2 G' h6 R4 F4 z
81.   const target = (e.target.tagName == 'MARK') ? e.target.parentElement : e.target;
    
82.   if(target.href.split('#').length <= 1){
    3 o- O( E8 F' M8 r
83.     return;
    4 Z. x7 H0 I4 }  w
84.   }
    # D- B: c4 U- f, V& j2 W
85.   let t = document.getElementById(target.href.split('#')[1]);
    * I: M! ^" o) F4 F/ @
86.   if(t){
    ; Y6 K( C$ s) n% D+ B/ q* F/ k
87.     t.classList.add('blink_me');
    * u. X- [1 j' Z8 ^; s: c
88.     setTimeout(()=>{t.classList.remove('blink_me');},2000)
    
89.   }
    # J2 ^% @$ D! ^& k
90. })
    ; O3 u5 H0 k$ V" ~/ i; R) j0 X. g/ L
91. 
    
92. if(!document.getElementById('search_result')){
      K4 }4 S: D2 o  f
93.   document.body.insertBefore(matched,document.body.firstChild)
    ! I' q' w9 m- N
94.   document.body.insertBefore(search_bar,document.body.firstChild)
    3 T3 b! R5 \' q9 V' N
95. }
    7 r$ u& ]( E2 b: s  T1 g4 l7 l, C
96. }
    % x9 v5 u, r1 l9 ~' J
97. setTimeout(myscript,0);

复制代码

) u$ h7 ?9 s- s7 H8 Z$ A代码复制不了的话，可以下载附件：


2 ~. q0 P; Y5 E4 I# V( G  m
1 H4 P; A3 y4 S5 M* Y( }
# `, _" C  V- l好久没来论坛了。

& \- ~  `3 m, `# m" [

geckopapa

谢谢分享。装在试试看。