javascript - 搜索单词并给它们上课

Question

我试图用绿色高亮表示 OK，黄色表示失败，红色表示错误。

我将结果保存在一个变量中。我如何搜索这个词并给出红色、绿色、黄色的 3 个不同类别？

 //highlight words in the results
    var results = $('#results').html();
    console.log(results);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="results">Fail blabla Error asda OK</span>

Answer 1

解析 html() 并将子字符串包装在 span 中，添加适当的 class。

$("#results").html(function() {
  return $(this).html()
    .replace("Fail", '<span class="fail">Fail</span>')
    .replace("OK", '<span class="ok">OK</span>')
    .replace("Error", '<span class="error">Error</span>');
})

.fail {
  color: orange;
}

.error {
  color: red;
}

.ok {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="results">Fail blabla Error asda OK</span>