使用jquery在句子中的两个单词下划线

<script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>

<p id="sentence">这是一个示例句子。</p>

var sentence = $("#sentence");
var words = sentence.text().split(" ");
var word1 = words[0];
var word2 = words[2];

sentence.html(sentence.html().replace(word1, "<span class='underline'>" + word1 + "</span>"));
sentence.html(sentence.html().replace(word2, "<span class='underline'>" + word2 + "</span>"));
$(".underline").css("text-decoration", "underline");
$(".underline").css("text-decoration-style", "dotted");
$(".underline").css("text-decoration-color", "red");

<style>
.underline {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: red;
}
</style>