词典内短语检索 js脚本 通用
本帖最后由 baodi 于 2024-10-24 20:03 编辑输入搜索的短语，回车触发搜索。
搜索前：
https://s21.ax1x.com/2024/10/24/pAwZ4dH.jpg
搜索后：点击即可跳转对应的短语，非常简单快速
https://s21.ax1x.com/2024/10/24/pAweqhR.md.jpg
出于查询词典短语的需求，写了一个脚本，用了许久，还挺好用，特此分享。
*但不是加入即用的，需要一点css 选择器样式的了解，才能修改成自己用的词典。
来由：
有些词典并没有给短语一个词条，比如想搜索period of time，就只能先搜索time词条，然后打开软件的页内搜索功能搜索，但在我用的词典内ldoce6有18处出现period of time，那么最糟糕的情况下要切换18次才能找到自己想要的释义。
而使用了我这个脚本，就可以偷懒，搜索“per”，然后就出来2个结果，其中一个就是period of time的条目，点击即达词典对应位置。
使用方法：
在词典自带的.js为后缀的文件最后，加入以下代码并修改。
根据对应的词典，需要针对性地修改。
修改代码第42行的const selector = [".phrvbhwd",".lexunit"…
通过电脑平台的goldendict或安卓平台 无限词典app的词典服务器，甚至解包词典。找到对应的短语在词典的样式中对应的css选择器，比如我用的ldoce6中有些短语对应.phrvbhwd这个选择器，有些对应.lexunit这个选择器，等等，修改完成后。
保存.js文件，一般来说软件会自动挂载这个新的.js文件替换词典原版加载的.js文件。
网友互助？：因为这玩意要从词典的条目中筛选出对应的css选择器，对于一些朋友可能还是太难，所以希望网友在回复帖子里附上自己使用的词典修改后“完整的”js文件的百度云盘（文件本就不大，百度云盘最稳妥）链接，注意是完整的js文件。然后在这层楼的点评中附上 词典名称+对应楼层，方便其他人检索。
附加：css选择器学习教程：runoob教程
代码：
/*版本 v1.0*/
function myscript(){
const style = document.createElement("style");
style.innerText = `
/*css样式，可以将这部分样式放到css文件中*/
.blink_me {
/*scroll-margin-top: 18px;锚点的配置*/
padding-top: 18px;
margin-top: -18px;
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
input {
margin: 3px;
}
#search_result ul{
margin: 3px 3px;
padding: 0;
}
#search_result a{
font-weight: bold;
}
/*css样式-结束*/
`;
document.head.append(style);
const search_bar = document.createElement('input');
search_bar.type = 'search';
search_bar.id = 'search_bar'
search_bar.placeholder = '搜索短语，回车搜索';
const matched = document.createElement('div');
matched.id = 'search_result';
//词典中要搜索的元素对应的class名称,这里是ldoce6词典的短语对应的css选择器，你需要改成你用的词典的短语对应的选择器。
const selector = [".phrvbhwd",".lexunit",".lexvar",".propformprep",".propform",".collo",".syn",".relatedwd",".reflex"];
const march_nodes = [];
for (const sel of selector){
document.querySelectorAll(sel).forEach((e)=>{
march_nodes.push(e)
})
}
myscript.pos = 1;
search_bar.addEventListener('keydown',function(e){
if (e.keyCode == 13) {
let pos = myscript.pos;
let matched_html = ''
march_nodes.forEach((ele)=>{
if(ele.innerText.toLocaleLowerCase().indexOf(search_bar.value.toLocaleLowerCase()) === -1){
return
};
const a_html = ele.innerText.replace(new RegExp('(' + search_bar.value.trim() + ')', "gi"),'<mark>$1</mark>')
if(!ele.id){
ele.id = 'matched_' + pos++;
}
matched_html += `
<ul><a href="#${ele.id}">${a_html}</a></ul>
`
})
if (matched_html === ''){
matched_html += `
<ul><a>无匹配短语</a></ul>
`
}
myscript.pos = pos;
matched.innerHTML = matched_html;
}
})
matched.addEventListener('click',function(e){
const target = (e.target.tagName == 'MARK') ? e.target.parentElement : e.target;
if(target.href.split('#').length <= 1){
return;
}
let t = document.getElementById(target.href.split('#'));
if(t){
t.classList.add('blink_me');
setTimeout(()=>{t.classList.remove('blink_me');},2000)
}
})
if(!document.getElementById('search_result')){
document.body.insertBefore(matched,document.body.firstChild)
document.body.insertBefore(search_bar,document.body.firstChild)
}
}
setTimeout(myscript,0);
代码复制不了的话，可以下载附件：
static/image/hrline/line1.png
好久没来论坛了。
谢谢分享。装在试试看。
页:
[1]