[Anki-how-to]根据已有单词字段来对句子字段进行高亮

主要包括几个步骤如下,均是在“卡片”选项的配置:

  • 声明脚本,一般不需要修改;
  • 先载入句子字段。注意设置好id,便于被脚本调用;
  • 后调用脚本;

**基于我的样式表,效果图如下:

Paste_Image.png

涉及Html、CSS和javascript的基本知识,可以在W3SchoolsMDN学习:
代码如下,请尽量看懂再根据自己实际修改:

/*-------声明脚本--------*/
<script>
function highlight(text)
{
    inputText = document.getElementById("inputText")
    var innerHTML = inputText.innerHTML
    var index = innerHTML.indexOf(text);
    if ( index >= 0 )
    { 
        innerHTML = innerHTML.substring(0,index) + "<span class='highlight'>" + innerHTML.substring(index,index+text.length) + "</span>" + innerHTML.substring(index + text.length);
        inputText.innerHTML = innerHTML 
    }
}
</script>
/*高亮的样式,自定义,放在样式表里面*/
<style>
.highlight{
    background-color:yellow;/*演示*/
}
</style>

/*这是要高亮的文本,注意设置了id为"inputText",作为脚本的参量*/
<div id="inputText">
    The fox went over the fence./*演示*/
    /*{{句子}}*/
</div>
/*开始调用脚本,注意顺序,先载入需要高亮的文本,
后调用highlight脚本,把fox改为{{字段}},
比如我有一个字段为“单词”,就是highlight('{{单词}}')*/
<script>
highlight('fox');/*演示*/
/*highlight('{{单词}}');*/
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题1 /72浏览器页面有哪三层构成,分别是什么,作用是什么?参考答案构成:结构层、表示层、行为层分别是:HTM...
    _Yfling阅读 1,242评论 0 23
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,842评论 25 709
  • 父母不能理解我们时父母开始老了我们能理解父母时我们开始老了孩子不听我们话了孩子开始长大了我们开始听孩子话了孩子真正长大了
    爱码爱自由阅读 439评论 4 16
  • 那年夏天 千亩荷塘拒绝了所有的炎热 传递着柔润的清凉 夕阳、白鹤、墓碑和呼啸的晚风 牵手、拥抱、亲吻和奔跑的喜悦 ...
    慢世人阅读 251评论 2 3
  • 数据连接 merge 默认将重叠列的列名作为“外键”进行连接 on显示指定“外键” left_on,right_o...
    b485c88ab697阅读 488评论 0 0