javascript - 在 Jinja 模板中更改 h1 标签中某个部分的样式

Question

我在使用 JS 提取的 h1 标签中有一个问题，就像这样......

var question = document.getElementsByTagName("h1");

如果问题 (h1) 包含单词“全部打勾”，我只希望“全部打勾”(而不是问题的任何其他部分)为绿色。所以我开始这样......

if ($("question:contains('tick all')").length) {

};

但我不确定如何进一步编码。请帮忙

在我的 HTML 文件中，我有以下 Jinja 模板代码...

<h1>{{ question_text }}</h1>

Answer 1

如果你只有一个h1标签，那么你可以像下面这样使用

var ques = $('h1').text();
if(ques.indexOf('tick all') >= 0){
  ques = ques.replace("tick all","<span style='color:green'>tick all</span>");
  $('h1').html(ques);
}

对于多个h1标签，可以.each函数，

$('h1').each(function(){
var ques = $(this).text();
    if(ques.indexOf('tick all') >= 0){
      ques = ques.replace("tick all","<span style='color:green'>tick all</span>");
      $(this).html(ques);
    }
}