Home

在 Anki 的模板中除了可以使用 HTML 之外还可以使用 JavaScript, 如下读取卡片正面的单词，为卡片背面例句出现的此单词加上 <span class="emphasize-word"></span> ， 然后用 CSS 设置样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
  // Anki 对 ES6 不是完全支持，使用 var 定义变量
  var wordText = document.querySelector(".Word").innerText;
  // 使用 RegExp 定义 正则表达式 \\ 表示 \;
  // HTML 中的空格是 &nbsp;
  // 以 pervade 为例，如下正则表达式使用字面量可以表示为 /(pervade\w*(&nbsp;)?\.?)/gi
  // var re = new RegExp('(' + wordText + '\\w*(&nbsp;)?\\.?)', 'gi');
  var re = new RegExp('(' + wordText.slice(0, -1) + '\\w*)', 'gi');
  // $1 引用第一个 group 中的值
  var emphasizeWordText = '<span class="emphasize-word">$1</span>';

  var example = document.querySelector(".Example");
  var exampleHTML = example.innerHTML.replace(re, emphasizeWordText);
  example.innerHTML = exampleHTML;

</script>
1
2
3
span.emphasize-word {
  font-weight: bold;
}

Edited on