续·JavaScript实现Anki隔字挖空记忆文章

79 👍 / 31 💬

2018年的暑假,我写了这么一个程序,在知乎介绍过:

Aoyu Zuo:JavaScript实现Anki隔字挖空背新概念英语文章

在我的博客里还写了一篇记录我的思考过程的文章:

JavaScript实现文章隔字挖空及与Anki结合使用

很多朋友觉得这是一种很好的记忆方式。

同时,很多人在知乎或我的博客里评论、私信我说他们自己制作的卡片不能工作。

因为我已经没在用 Anki 了,所以并没有去验证,并且认为是他们不会用才导致的,便没有理会。

我现在很少用知乎,清明节前一天(周四)的中午,在垃圾短信里翻到一条知乎发来的短信,有人向我付费咨询问题。我把知乎App安装到手机上,打开来看,@陈新华 也遇到了上述问题。我依然觉得是他不会用的原因,不过既然他付费咨询了,那就明明白白地向他证明:是他不会用,而不是我的代码有问题。我决定给他截张图,并委婉地“嘲讽”他一下 。

我从我在知乎提供的下载链接把卡片下载下来、把Anki安装到电脑上,并把卡片导入到Anki中。新添加的卡片确实不能正常挖空 。这就很尴尬了。

我开始找原因。我把卡片导出为文本,发现不能挖空的原因是这样的:

我原本以为 Anki 组织内容的方式是这样的:

<div id="content">
    <div>Nice to meet you. Nice to meet you.</div>
    <div>Nice to meet you. Nice to meet you.</div>
    <div>Nice to meet you. Nice to meet you.</div>
</div>

其实它是这样的:

<div id="content">
    Nice to meet you. Nice to meet you.
    <div>Nice to meet you. Nice to meet you.</div>
    <div>Nice to meet you. Nice to meet you.</div>
</div>

第一段的内容,Anki 并没有为其添加 div 标签。代码不能正常识别哪里该挖空,所以就不能工作了。

也许我写那篇文章的时候还是我以为的那种方式,不知道从哪个版本开始 Anki 变成现在这样的。

代码不能正常工作了,就要想办法解决。不然,光看不能用,真要纠结死个人。

原来的代码确实存在一些问题——不够优雅,所以,很直接地:

我重写了代码。现在,中英文都能挖空了。

代码变化还是很大的,但本质上和重写前的代码也没什么区别,看起来,应该不再像是小学生写的代码了吧 。

  1. 中文、英文都能实现隔字/单词挖空
  2. 用正则表达式匹配标点(但我还是用了很多 if 语句)
  3. 手机、电脑使用同一段代码,而不是根据不同设备加载不同的代码(用苹果设备的朋友应该也能正常使用了,不过我没试过,不清楚)
  4. 在卡片内容里无论添加什么html标签都不会影响挖空了
  5. 用git进行版本控制
  6. 我没有用 CSS 美化卡片,可能没有之前的卡片看起来精致,但“大巧不工”

文章里我就不再贴代码了,因为。。我把代码上传到了 GitHub 。代码很好懂,一些地方我还加上了注释。在这里贴上仓库地址,感兴趣可以看看我的 commits:

ZuoAoyu/Anki-Blank-Space

写代码时感觉倒没什么,但写README、各种描述、起名字时真的是纠结死个人。

制作好的卡片包可以在仓库里下载,但在这里还是贴上下载地址,直接导入 Anki 就可以了。提取码:k4nd

pan.baidu.com/s/1hxop48...

最后放两张图片吧,来证明代码确实是没问题的 。


专栏:千里之行开始的地方