jQuery高亮显示

有很多jQuery插件可以实现文本高亮，这里使用一个简单的方法，实现高亮，不需要其他JavaScript包，只是纯净的JavaScript，这个脚本返回被处理的原始数据，高亮的文本用标签包含起来，可以使用css定义样式。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title> New Document </title><meta name="Generator" content="EditPlus"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""></head>
<script src="jquery-1.8.3.js"></script>
<style type="text/css">body {margin: 50px;font: 15px Arial;line-height: 1.5;}input, button { padding: .3em; }.highlight {background: yellow;}
</style>
<script type="text/javascript">
function highlight(text, words, tag) {// 默认的标签，如果没有指定，使用spantag = tag || 'span';var i, len = words.length, re;for (i = 0; i < len; i++) {// 正则匹配所有的文本re = new RegExp(words[i], 'g');if (re.test(text)) {text = text.replace(re, '<'+ tag +' class="highlight">$&</'+ tag +'>');}}return text;
}function unhighlight(text, tag) {// 默认的标签，如果没有指定，使用spantag = tag || 'span';var re = new RegExp('(<'+ tag +'.+?>|<\/'+ tag +'>)', 'g');var unhighlightText=text.replace(re, '');return unhighlightText;
}
$(function (){var $p = $('p');$('#highlight').click(function(){var words = $('input').val().replace(/(\s,|,\s)/g, ',').split(',');$p.html(unhighlight($p.text()));$p.html(highlight($p.html(), words) );});$('#unhighlight').click(function(){$p.html(unhighlight($p.text()));});
});/*
$('p').html( highlight($('p').html(), //替换的文本['foo', 'bar', 'baz', 'hello world'], //高亮的文本数组'strong' //自定义标签
));
*/
</script>
</head>
<body>
<input type="text" value="工程师,技术"/><button id="highlight">高亮</button><button id="unhighlight">取消高亮</button><p>
诸位，咱当工程师也是十余年了，不算有出息，环顾四周，也没有看见几个有出息的！回顾工程师生涯，感慨万千，愿意讲几句掏心窝子的话，也算给咱们师弟师妹们提个醒，希望他们比咱们强！ [1]好好规划自己的路，不要跟着感觉走！根据个人的理想决策安排，绝大部分人并不指望成为什么院士或教授，而是希望活得滋润一些，爽一些。那么，就需要慎重安排自己的轨迹。从哪个行业入手，逐渐对该行业深入了解，不要频繁跳槽，特别是不要为了一点工资而转移阵地，从长远看，这点钱根本不算什么，当你对一个行业有那么几年的体会，以后钱根本不是问题。频繁地动荡不是上策，最后你对哪个行业都没有摸透，永远是新手！　 [2]可以做技术，切不可沉湎于技术。千万不可一门心思钻研技术！给自己很大压力，如果你的心思全部放在这上面，那么注定你将成为孔乙己一类的人物！适可而止为之，因为技术只不过是你今后前途的支柱之一，而且还不是最大的支柱，除非你只愿意到老还是个工程师！　　　 　　[3]不要去做技术高手，只去做综合素质高手！在企业里混，我们时常瞧不起某人，说他“什么都不懂，凭啥拿那么多钱，凭啥升官！”这是普遍的典型的工程师的迂腐之言。8051很牛吗？人家能上去必然有他的本事，而且是你没有的本事。你想想，老板搞经营那么多年，难道见识不如你这个新兵？人家或许善于管理，善于领会老板意图，善于部门协调等等。因此务必培养自己多方面的能力，包括管理，亲和力，察言观色能力，攻关能力等，要成为综合素质的高手，则前途无量，否则只能躲在角落看示波器！技术以外的技能才是更重要的本事！！从古到今，美国日本，一律如此！ [4]多交社会三教九流的朋友！不要只和工程师交往，认为有共同语言，其实更重要的是和其他类人物交往，如果你希望有朝一日当老板或高层管理，那么你整日面对的就是这些人。了解他们的经历，思维习惯，爱好，学习他们处理问题的模式，了解社会各个角落的现象和问题，这是以后发展的巨大的本钱，没有这些以后就会笨手笨脚，跌跌撞撞，遇到重重困难，交不少学费，成功的概率大大降低！ 　　 [5]知识涉猎不一定专，但一定要广！多看看其他方面的书，金融，财会，进出口，税务，法律等等，为以后做一些积累，以后的用处会更大！会少交许多学费！！　 　　 [6]抓住时机向技术管理或市场销售方面的转变！要想有前途就不能一直搞开发，适当时候要转变为管理或销售，前途会更大，以前搞技术也没有白搞，以后还用得着。搞管理可以培养自己的领导能力，搞销售可以培养自己的市场概念和思维，同时为自己以后发展积累庞大的人脉！应该说这才是前途的真正支柱！！！　　　 　　　 [7]逐渐克服自己的心里弱点和性格缺陷！多疑，敏感，天真（贬义，并不可爱），犹豫不决，胆怯，多虑，脸皮太薄，心不够黑，教条式思维。。。这些工程师普遍存在的性格弱点必须改变！很难吗？只在床上想一想当然不可能，去帮朋友守一个月地摊，包准有效果，去实践，而不要只想！不克服这些缺点，一切不可能，甚至连项目经理都当不好--尽管你可能技术不错！　　　 　　　 [8]工作的同时要为以后做准备！建立自己的工作环境！及早为自己配置一个工作环境，装备电脑，示波器（可以买个二手的），仿真器，编程器等，业余可以接点活，一方面接触市场，培养市场感觉，同时也积累资金，更重要的是准备自己的产品，咱搞技术的没有钱，只有技术，技术的代表不是学历和证书，而是产品，拿出象样的产品，就可技术转让或与人合作搞企业！先把东西准备好，等待机会，　　否则，有了机会也抓不住！　　　[9]要学会善于推销自己！不仅要能干，还要能说，能写，善于利用一切机会推销自己，树立自己的品牌形象，很必要！要创造条件让别人了解自己，不然老板怎么知道你能干？外面的投资人怎么相信你？提早把自己推销出去，机会自然会来找你！搞个个人主页是个好注意！！特别是培养自己在行业的名气，有了名气，高薪机会自不在话下，更重要的是有合作的机会...　　　 　　 [10]该出手时便出手！永远不可能有100%把握！！！条件差不多就要大胆去干，去闯出自己的事业，不要犹豫，不要彷徨，干了不一定成功，但至少为下一次冲击积累了经验，不干永远没出息，而且要干成必然要经历失败。不经历风雨，怎么见彩虹，没有人能随随便便成功！
分类: 好好生活</p>
</body>
</html>

转载：http://blog.jdk5.com/zh/javascript-highlighting-text/#comment-91

jQuery高亮显示相关推荐

Jquery高亮显示文本中重要的关键字
一.界面预览鼠标放到右边的Tab按钮上,文字透明度降低,同时一段文字高亮显示,效果如下: Demo地址:http://5thirtyone.com/sandbox/samples/fadefocus ...
JQuery 文本框高亮显示插件
以前使用Mootools Js框架,文本框有个$('id').highlight()高亮方法,使其高亮显示,效果如下: JQuery 中没有这个方法,自己今天写了一个Plugin,把代码贴出来分享一下 ...
jq查找字段忽略html标签,jQuery过滤HTML标签并高亮显示关键字的方法
本文实例讲述了jQuery过滤HTML标签并高亮显示关键字的方法.分享给大家供大家参考.具体如下: jQuery实现网页关键字过滤效果,将需要过滤的文字定义在JavaScript中,可定义多个,不过要 ...
jQuery搜索高亮显示
方法一 $(function () {//1.获取要高亮显示的行var rowNode = $('.tiBlock_3NhqL');//2.获取搜索的内容var searchContent = $(& ...
jQuery实现图片高亮显示
图片高亮显示在页面中很常见,下面是用jquery实现图片高亮显示的效果 html代码部分 <body><div>/*添加图片*/<img src="img/1. ...
jQuery 图片高亮显示
主要的jQuery代码: 1 $(function() { 2 $("ul li").hover(function() { 3 // over 4 //鼠标移入当前列透明度为1 其 ...
html鼠标点击时的样式,鼠标点击输入框时高亮显示边框颜色【jquery和css实现】...
这里解释如何突出显示表单字段的边框颜色.背景颜色等,如焦点上的HTML输入文本框.输入密码.选择下拉菜单和文本区域,并在失去焦点时使用jquery和css使它们正常. 突出显示焦点上的边框颜色突出显 ...
图片突出显示（图片高亮显示）-jQuery实现-案例
效果展示: 当鼠标放在某一张图片上的时候,突出显示这张图片. 分析: 给鼠标移入的图片设置鼠标移入事件:把当前的图片透明度设置为1,其他兄弟节点的图片透明度设置为0.2: 鼠标离开大的div, 把所有 ...
jquery 点击li循环高亮显示
效果图: 实现上部分效果其实很简单下面是代码 js代码 function clickWriter(obj) {$(obj).parent().find("a").each(func ...

jQuery高亮显示

jQuery高亮显示相关推荐

最新文章

热门文章