Изменить стиль определенной части в теге h1 в шаблоне Jinja

Question

У меня есть вопрос в теге h1, который я использую для извлечения с помощью JS, например ...

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

Если вопрос (h1) содержит слова «отметить все», я хочу только«отметьте все» (не какая-либо другая часть вопроса) будет окрашена в зеленый цвет.Итак, я начал так ...

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

};

Но я не уверен, как его кодировать дальше.Пожалуйста, помогите

В моем файле HTML у меня есть следующий код шаблона Jinja ...

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

Answer 1

JQuery версия

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>
 Ali tick all
</h1>
<h1>
 Ali tick none
</h1>

Answer 2

Просто выберите его (ниже) ИЛИ, если вы хотите, чтобы весь контент H1 был завернут:

var myString = 'tick all';
$("h1:contains('" + myString + "')").wrap(<span class='green-highlight'></span>");

Выберите только строку:

$(function() {
  var myString = 'tick all';
  $("h1:contains('" + myString + "')").html(function(_, html) {
    return html.split(myString).join("<span class='green-highlight'>" + myString + "</span>");
  });
});

.green-highlight {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


<h1>Hi, I am still me</h1>
<h1>Second one with tick all</h1>
<h1>Three wandering mice</h1>

Answer 3

если у вас есть только один тег 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);
    }
}