如何在Anki卡片模板中使用JavaScript动态加粗引号内文本

在Anki里，卡片由模板和笔记字段组成。如果想让字段里引号内的文字自动变粗，不需要每次手动改格式，可以直接在卡片模板中用JavaScript处理。下面介绍具体做法。

实现思路

核心逻辑是：卡片渲染时，浏览器会执行模板里的脚本。我们先用JavaScript拿到字段对应的DOM元素，再使用正则表达式匹配引号（包括中文和英文引号）内的文本，把匹配到的部分替换成带 <strong> 标签的内容。

卡片正面模板示例

在Anki的卡片模板编辑器中，正面可写成下面这样。其中 {{内容}} 是你的字段名。

<div id="text">{{内容}}</div>
<script>
  var el = document.getElementById('text');
  // 匹配中文引号“ ”或英文引号" "内的内容
  var html = el.innerHTML;
  html = html.replace(/([“"'])(.+?)1/g, function(match, q, inner){
    return '<strong>' + q + inner + q + '</strong>';
  });
  el.innerHTML = html;
</script>

处理背面与其他字段

如果背面也要同样效果，把上面的脚本复制到背面模板，并把 getElementById 的id换成对应元素的id即可。

注意事项

• Anki桌面版使用系统浏览器内核，支持标准JavaScript，上面的写法可以直接用。
• 移动版AnkiDroid也支持，但iOS版某些旧版本可能对正则支持略有差异，建议测试。
• 如果字段里本身含有HTML标签，直接替换innerHTML可能破坏结构，此时应先操作文本节点。

完整可运行示例

下面是一个更稳妥的写法，只处理文本节点，避免破坏原有标签：

function boldQuotes(node) {
  if (node.nodeType === 3) {
    var text = node.nodeValue;
    if (/[“"'].+?[”"']/.test(text)) {
      var span = document.createElement('span');
      span.innerHTML = text.replace(/([“"'])(.+?)1/g, '<strong>$1$2$1</strong>');
      node.parentNode.replaceChild(span, node);
    }
  } else if (node.nodeType === 1) {
    Array.from(node.childNodes).forEach(boldQuotes);
  }
}
boldQuotes(document.getElementById('text'));

小结

用JavaScript动态加粗引号内文本，关键就是正则匹配加DOM替换。把它放在卡片模板的 <script> 中，每次复习都会自动生效，能节省大量手动排版时间。

AnkiJavaScript卡片模板修改时间：2026-07-26 20:54:17