zidian
Version:
汉字、词语、成语查询接口
184 lines (157 loc) • 9.22 kB
HTML
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<title>字典</title>
<meta name="keywords" content="netnr,NET牛人,zidian,字典" />
<meta name="description" content="netnr,NET牛人,zidian,字典" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/netnrmd@3.0.0/src/netnrmd.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 my-4 markdown-body">
<h1>zidian 字典</h1>
<p>汉字、词语、成语查询接口</p>
<h3>引言</h3>
<ul>
<li>数据来源于开源项目 <a href="https://github.com/pwxcoo/chinese-xinhua">https://github.com/pwxcoo/chinese-xinhua</a></li>
<li>而该项目的数据是一个<code>JSON</code>文件，大小超出 <code>20M</code>，不利于页面加载使用，所以拆分了文件</li>
<li>提取字、词、成语为数组，根据数组索引分页生成详情，具体请看 <code>build/parse.html</code> 的拆分脚本</li>
</ul>
<h3>使用</h3>
<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/zidian@0.0.3/dist/zidian.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-comment"><!-- or --></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/gh/netnr/zidian/dist/zidian.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</code></pre>
<p>查看 <a href="https://unpkg.com/zidian/">https://unpkg.com/zidian/</a><br>拉取 <code>npm install zidian</code></p>
<p>汉字查询</p>
<pre><code class="language-js">zidian.<span class="hljs-title function_">equalWord</span>(key)
zidian.<span class="hljs-title function_">equalWord</span>(<span class="hljs-string">"爱"</span>).<span class="hljs-title function_">then</span>(<span class="hljs-variable language_">console</span>.<span class="hljs-property">log</span>)
</code></pre>
<p>词语查询</p>
<pre><code class="language-js">zidian.<span class="hljs-title function_">equalCi</span>(key)
zidian.<span class="hljs-title function_">equalCi</span>(<span class="hljs-string">"美丽"</span>).<span class="hljs-title function_">then</span>(<span class="hljs-variable language_">console</span>.<span class="hljs-property">log</span>)
</code></pre>
<p>成语查询</p>
<pre><code class="language-js">zidian.<span class="hljs-title function_">equalIdiom</span>(key)
zidian.<span class="hljs-title function_">equalIdiom</span>(<span class="hljs-string">"叶公好龙"</span>).<span class="hljs-title function_">then</span>(<span class="hljs-variable language_">console</span>.<span class="hljs-property">log</span>)
</code></pre>
<p>词语模糊搜索</p>
<pre><code class="language-js">zidian.<span class="hljs-title function_">likeCi</span>(key)
zidian.<span class="hljs-title function_">likeCi</span>(<span class="hljs-string">"美"</span>).<span class="hljs-title function_">then</span>(<span class="hljs-variable language_">console</span>.<span class="hljs-property">log</span>)
</code></pre>
<p>成语模糊搜索</p>
<pre><code class="language-js">zidian.<span class="hljs-title function_">likeIdiom</span>(key)
zidian.<span class="hljs-title function_">likeIdiom</span>(<span class="hljs-string">"三百"</span>).<span class="hljs-title function_">then</span>(<span class="hljs-variable language_">console</span>.<span class="hljs-property">log</span>)
</code></pre>
<h3>说明</h3>
<ul>
<li>接口查询返回一个 <code>Promise</code> 对象</li>
<li>查询的接口会缓存到 <code>zidian.cache</code> 对象</li>
<li>查询无记录时，返回 <code>null</code></li>
<li><code>zidian.config.host</code> 可配置请求源</li>
</ul>
</div>
</div>
<hr class="my-5" />
<div class="row">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-text">汉字</span>
<input class="form-control" id="txt1" placeholder="输入一个汉字，如：爱" maxlength="1" />
</div>
<div class="input-group my-3">
<span class="input-group-text">词语</span>
<input class="form-control" id="txt2" placeholder="输入一个词语，如：美丽" maxlength="20" />
</div>
<div class="input-group">
<span class="input-group-text">成语</span>
<input class="form-control" id="txt3" placeholder="输入一个成语，如：一言既出，驷马难追" maxlength="20" />
</div>
<textarea id="res" class="form-control w-100 my-3" rows="15" placeholder="输出结果"></textarea>
<div class="input-group">
<span class="input-group-text">词语 模糊搜索</span>
<input class="form-control" id="txt4" placeholder="输入一个词语的关键字" maxlength="20" />
</div>
<div class="input-group my-3">
<span class="input-group-text">成语 模糊搜索</span>
<input class="form-control" id="txt5" placeholder="输入一个成语的关键字" maxlength="20" />
</div>
</div>
</div>
</div>
<script src="dist/zidian.js"></script>
<script>
function iszhcn(s) {
return escape(s).indexOf("%u") >= 0;
}
//zidian.config.host = "https://unpkg.com/zidian@0.0.2";
var res = document.getElementById('res');
document.getElementById('txt1').addEventListener('input', function () {
var key = this.value.trim();
if (key == "") {
res.value = "";
} else if (iszhcn(key[0])) {
zidian.equalWord(key[0]).then(function (info) {
res.value = info ? JSON.stringify(info, null, 4) : "无记录";
})
} else {
res.value = "请输入中文";
}
}, false);
document.getElementById('txt2').addEventListener('input', function () {
var key = this.value.trim();
if (key == "") {
res.value = "";
} else if (iszhcn(key)) {
zidian.equalCi(key).then(function (info) {
res.value = info ? JSON.stringify(info, null, 4) : "无记录";
})
} else {
res.value = "请输入一个词语";
}
}, false);
document.getElementById('txt3').addEventListener('input', function () {
var key = this.value.trim();
if (key == "") {
res.value = "";
} else if (iszhcn(key)) {
zidian.equalIdiom(key).then(function (info) {
res.value = info ? JSON.stringify(info, null, 4) : "无记录";
})
} else {
res.value = "请输入一个成语";
}
}, false);
document.getElementById('txt4').addEventListener('input', function () {
var key = this.value.trim();
if (key == "") {
res.value = "";
} else if (iszhcn(key)) {
zidian.likeCi(key).then(function (info) {
res.value = info ? JSON.stringify(info, null, 4) : "无记录";
})
} else {
res.value = "请输入一个词语的关键字";
}
}, false);
document.getElementById('txt5').addEventListener('input', function () {
var key = this.value.trim();
if (key == "") {
res.value = "";
} else if (iszhcn(key)) {
zidian.likeIdiom(key).then(function (info) {
res.value = info ? JSON.stringify(info, null, 4) : "无记录";
})
} else {
res.value = "请输入一个成语的关键字";
}
}, false);
</script>
</body>
</html>