javascript - 是否可以高亮显示部分文本节点？

Question

我正在创建 Text node喜欢var liContent = document.createTextNode(someHtmlString); .然后将此变量添加到列表中，如 $("<li/>").html(liContent).appendTo(targetUnorderList);

问题是:我可以突出显示 liContent 中的一些文本吗？元素？如果"is"——我该怎么做？澄清:我需要突出显示 li 中的部分内容.例如，单词 Nice .

更新:同时我需要将Text节点的所有内容像文本一样显示出来(包括html标签)。

更新2:不允许对需要显示的字符串进行任何处理。似乎没有解决方案，因为文本节点被浏览器解释为纯文本。

整个代码示例(有效):

var someHtmlString = "<i class='icon-window-add'>Nice text here</i>";
var targetUnorderList = $("#targetUnorderList");
var liContent = document.createTextNode(someHtmlString);
$("<li/>").html(liContent).appendTo(targetUnorderList)[0];

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <ul id="targetUnorderList"></ul>
</div>

Answer 1

是的，你可以创建一个自定义类 highlight 然后用这个类包装你想要通过 span 突出显示的文本，因为你使用的是 jQuery 它可以像这样简单地完成:

$("<li/>").html("<i class='icon-window-add'>Nice <span class='highlight'>text here</span></i>");

希望这对您有所帮助。

var li = $("<li/>").html("&lt;i class='icon-window-add'&gt;Nice <span class='highlight'>text here</span>&lt;/i&gt;");

$("#targetUnorderList").append(li);

.highlight {
  background-color: yellow;
}

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