利用JavaScript正则表达式模拟Google Talk的文本处理

Google Talk是一个功能很简洁的即时通讯工具,尤其是它的文字输入区域,不同于其他IM,除了一个文字输入区域外没有任何其他操作。但是用户可以通过输入一些特殊组合的字符来格式化文本,比如:

  • _文本_,出现的效果就是斜体:文本
  • *文本*,出现的效果就是粗体:文本
  • 还有很多表情符号,输入后会变为蓝色的字符

前段时间给公司做一个Web IM的项目,就在JavaScript中用正则表达式模拟了一下这个效果。先看一下代码吧:

  • msg.replace(/(\*)([^\*]+)(\*)/g,'<strong>$2</strong>'); // 处理粗体文字的显示
  • msg.replace(/(_)([^_]+)(_)/g,'<em>$2</em>'); // 处理斜体文字的显示
  • msg.replace(/((http|https):\/\/.+)/g,'<a href="$1" target="_blank">$1</a>'); // 处理超文本链接

大致的原理就是:正则表达式中,用括号括起来的部分会从左向右的进行编号,然后在replace()的第二个参数中,通过 $n 来引用。比如:

var str = 'JavaScript is GREAT!';
str = str.replace(/(Java)(Script)/,'<strong>$1</strong><em>$2</em>');

str输出的结果就是 JavaScript is GREAT!

4条留言

  1. maxbbn - August 4th, 2007 at 19:29

    正则表达式,还刚学 :D

  2. Robin - August 5th, 2007 at 0:14

    正则的字符替换,妙

  3. 怿飞 - August 27th, 2007 at 16:41

    Very good idea!

  4. 天空诚 - December 4th, 2007 at 18:42

    不错,创意很重要

留言: