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);
    }
}

Answer 2

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 3

只需将其挑选出来（如下），或者如果您想包装整个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>

在Jinja模板中时，更改h1标签中特定部分的样式

3 个答案: