APP Designer 制作简易英汉词典的回调函数书写

在学习MATLAB 的App Designer 时看到的一个有意思的小项目，主要步骤参考了slandarer 的MATLAB 手把手带你制作第一个APP designer程序(电子词典)。本文主要记录用于获取翻译结果的回调函数的书写思路。

词典实现原理

我们的词典实际上是利用网络资源实现的，即将我们要查找的单词输入至网络词典获取结果，再将结果显示在我们的App中。比如，在这个项目中，我们通过有道词典查询单词，并将需要的查询结果截取下来。我们尝试搜索“paper”的中文含义，不难发现，网页会转向一个带有“paper”的URL链接：

将此部分替换为我们要查找的单词，便可以快速访问对应的翻译页面。按F12可以查看网页源码，我们可以将鼠标放在源码上，对照网页快速定位翻译内容。一般来说，基本的释义在第一个 <div class=“trans-container”> 之后的 <ul> 与 </ul> 之间，并且不同词性的释义会以 <li> 和 </li> 分隔。

回调函数书写

我们需要在按下“查询”按钮之后获取翻译结果，所以这里的回调函数主要指“查询”按钮对应的 ButtonPushed 回调函数。
首先从编辑框获取要查询的英文单词，并得到对应的URL;

search_word = app.EditField.Value;
url = ['https://dict.youdao.com/w/eng/' search_word '/#keyfrom=dict2.index'];

然后通过 webread 函数读取网页源码；

complete_code = webread(url);

通过 regexpi 函数获取匹配内容的索引(可能得到多个索引，我们需要的是第一个)；

id = regexpi(complete_code, '<div class="trans-container">');

裁取我们需要的网页源码；

temp_code = complete_code(id(1):end);
trans_start = regexpi(temp_code, '<ul>');
trans_end = regexpi(temp_code, '</ul>');
temp_code = temp_code(trans_start(1)+4:trans_end(1)-1);

经过以上操作，网页源码被裁剪成这样：

      <li>n. 纸；报纸；（工作、学习或个人的）资料，文件（papers）；证明，证件（如护照、身份证等）（papers）；政府报告，官方政策文件；<英>考试，答卷；（研究）论文，（学术）讲话；<美>（学校课程的）学期论文；墙纸，壁纸；有价证券；手纸，卫生纸；<俚>（剧院等娱乐场所的）免费入场券</li><li>v. 用墙纸裱糊（墙壁）；用墙纸覆盖（洞，污点）（paper sth. over）；掩盖（尴尬问题）（paper sth. over）；<俚>发免费入场券使（剧院）满座</li><li>adj. 纸做的，纸质的；书面的，印刷的；纸上的，有名无实的</li><li>【名】 （Paper）（俄）帕佩尔（人名）</li>

我们只需将 <li> 和 </li> 删去即可得到所需单词释义；

[id_start, id_end] = regexpi(temp_code, '<(\/)?li>');
id = [id_start;id_end];
while ~isempty(id)
temp_code(id(1,end):id(2,end))=[];
id(:,end)=[];
end
search_result = temp_code;

id_start 是 <li> 和 </li> 的起始索引， id_end 是它们的结束索引，起始索引至结束索引之间的内容即为要删去的内容，使用上面代码进行从后往前的删除。
最后将释义显示在App中。

app.TextArea.Value = search_result;

当输入内容搜索不到对应释义，或者输入非英文单词时，显示的结果可能会出现问题。为此，可以在代码中加入判断条件完善功能。
一段可用代码如下所示：

 function ButtonPushed(app, event)search_word = app.EditField.Value;if search_word <= 255url = ['https://dict.youdao.com/w/eng/' search_word '/#keyfrom=dict2.index'];complete_code = webread(url);id = regexpi(complete_code, '<div class="trans-container">');if ~isempty(id)temp_code = complete_code(id(1):end);trans_start = regexpi(temp_code, '<ul>');trans_end = regexpi(temp_code, '</ul>');temp_code = temp_code(trans_start(1)+4:trans_end(1)-1);[id_start, id_end] = regexpi(temp_code, '<(\/)?li>');id = [id_start;id_end];while ~isempty(id)temp_code(id(1,end):id(2,end))=[];id(:,end)=[];endsearch_result = temp_code;app.TextArea.Value = search_result;elseapp.TextArea.Value = strcat(10,'No result.');endelse app.TextArea.Value = strcat(10,'This is NOT a word.');endendend

App效果如下所示：

中译英在源码的识别上与英译中有些区别，这里不做讨论。当输入中文时，将会显示“This is NOT a word.”