html - 渲染后突出显示页面上的文本

Question

我有一个应用程序可以让用户在多个字段中搜索一个字符串，当他们查看详细记录时，他们希望所有出现的字符串都被突出显示。

详细信息表单由标签和 ListView 组成，其中大部分位于 TabPanel 中(来自 AJAX 控件工具包)。我想避免使用蛮力手动解析每个值以在显示之前添加突出显示标签。

有没有办法加载我的表单然后解析 HTML？还有其他解决方法吗？

Answer 1

JavaScript 和 JQuery 怎么样？ http://plugins.jquery.com/project/highlight

我刚刚试用了那个插件，它成功了。您可以指定要突出显示的标签和单词。

<script language="javascript" type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.highlight-2.pack.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready( function () {
    $('p').each(function() { $.highlight(this, 'LOREM'); });
});
</script>
<style type="text/css">
    .highlight { background-color: yellow }
</style>

..
..
..
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi gravida risus elementum tortor. Duis mattis, est et volutpat cursus, mi mi ornare tortor, sed fringilla nibh erat sed eros. In nec orci vel velit scelerisque ultrices. Nunc auctor elit. Proin orci ligula, luctus a, venenatis sit amet, laoreet a, mauris. Suspendisse sem nibh, interdum eu, vestibulum non, semper vel, mauris. In quis leo suscipit risus semper pretium. Cras interdum iaculis dui. Etiam vel ipsum eu sapien dapibus sagittis. Donec lobortis, lectus et placerat euismod, quam dui porttitor sem, sed fermentum eros quam ac ipsum. Ut eu augue. Nullam lacinia dictum neque. Nullam eros. Phasellus sem nisi, feugiat nec, consectetur vel, ullamcorper at, nisl. Aenean quam risus, ullamcorper a, ultricies ut, posuere ac, quam. Vestibulum sed lectus ac orci fermentum viverra. Sed aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
    </p>