位置：首页>> 网络编程>> JavaScript>> JavaScript正则表达式的简单应用：高亮显示

JavaScript正则表达式的简单应用：高亮显示

作者：webflash　来源：经典论坛　发布时间：2008-07-20 12:46:00　

标签：正则表达式,高亮,样式,javascript

大家都知道一些论坛的标题有高亮显示功能，在这里我不讨论也不研究论坛普遍的实现方法，下面是我的实现方法：

实现思路：把要高亮显示的标题加上特定标签一起存入数据库，方法有下面几种：

1.直接用<font>标签包含，如“<font color="#FF0000">正则表达式</font>”;

2.加入特殊字符串，如“$red正则表达式”，然后在内容列表页加个脚本对含“$red”的标签进行查找替换，适用于大型网站，存入数据库的字节较小，类似网站模板技术;

3.只带上样式引用标签，在内容列表页加入样式控制表现，此方法方便更新显示效果（本实例采用此方法）。

实现功能：
1.表单提交验证说明（重定义form的onsubmit事件）：
（1）提交空表单提示
（2）正确提交表单提示
2.引用样式风格前判断是否输入内容
3.input取得焦点时隐藏提示面板
4.应用样式时，如果原来没有加入样式的，直接加入本样式引用类和必要的HTML标签;如果已存在必要的HTML标签，只改动class的风格引用类名;在原有引用风格的基础上选择“无”样式，可去除HTML。这些改变不会影响到表单的内容字符串，可以方便修改内容并应用样式。

实现方法：

客户端JavaScript实现，主要用到JavaScript的正则表达式匹配和替换函数。虽然本实例主要讲JavaScript的正则表达式应用，但还是加入了不少额外函数用于提示操作，大家可以不管这些，多留意MyStyle(style)和clearHTML()两个函数就行。

代码很简单，相信大家一看就明白，如有必要，有时间再加上教程吧。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>JavaScript正则表达式的一个简单应用</title><style type="text/css">body {width:630px; margin:50px auto; font-size:12pt;}a {text-decoration: none;}em {font-style: normal;}em.red {color: #F00;}em.green {color: #060;}em.blue {color: #06F;}em.bold {font-weight: bold;}#content {background-color: #FCFCFC;margin-top: 20px;padding: 10px;border: 1px dashed #CCC;display:none;}</style></head><body><form id="form1" name="form1" method="post" action="" onsubmit="return postForm()"> <input name="text" type="text" id="text" size="60" onfocus="hideInfo()" /> <input type="submit" name="Submit" value="提交" /><span title="先输内容，再选风格。选择一种风格后可以改变标签内的内容再重新选择不同的风格！"><a href="javascript:MyStyle('red');"><font color="#FF0000">红</font></a> <a href="javascript:MyStyle('green');"><font color="#006600">绿</font></a> <a href="javascript:MyStyle('blue');"><font color="#0033FF">蓝</font></a> <a href="javascript:MyStyle('bold');"><strong style="color:#000;">粗</strong></a> <a href="javascript:clearHTML();"><font color="#000000">无</font></a></span></form><div id="content"></div><script type="text/javascript">function showInfo() {document.getElementById("content").style.display="block";}function hideInfo() {document.getElementById("content").style.display="none";}function MyStyle(style) {showInfo();varinputValue=document.form1.text.value;if (inputValue=="") {document.getElementById("content").innerHTML="<font color='#BF3EFF'>请输入不带HTML的文本字符串再选择右上角的样式!</font>";}else{var re=inputValue.match(/<em\sclass='(red|green|blue|bold)'>/);if (re==null) {styleStr="<em class='"+style+"'>";document.form1.text.value=styleStr+inputValue+"</em>";document.getElementById("content").innerHTML="<em>"+style+"样式预览：</em>"+document.form1.text.value;}else{var re2=/(red|green|blue|bold)/g;var nowStyle=inputValue.replace(re2,style);document.form1.text.value=nowStyle;document.getElementById("content").innerHTML="<em>"+style+"样式预览：</em>"+document.form1.text.value;}}}function clearHTML() {varinputValue=document.form1.text.value;var re=inputValue.match(/<em\sclass='(red|green|blue|bold)'>/);if (re!=null) {var nowStr=inputValue.replace(/<em\sclass='(red|green|blue|bold)'>/,"").replace(/<\/em>/,"");document.form1.text.value=nowStr;document.getElementById("content").innerHTML=document.form1.text.value;}}function postForm() {showInfo();if (document.form1.text.value=="") {document.getElementById("content").innerHTML="<font color='#BF3EFF'>您提交的是空表单!</font>";}else{document.getElementById("content").innerHTML="<font color='#BF3EFF'>您的表单已正确提交!</font>";}return false;}</script></body></html>

投稿

JavaScript正则表达式的简单应用：高亮显示

猜你喜欢