最新消息:Rockyxia Web技术博客全新改版,响应式布局满足各种设备各种尺寸的访问需求。

Javascrip通过正则实现微博的话题和@功能示例

Javascript rockyxia 11201浏览 0评论

    现在的微博那叫一个火啊,以至于偶们公司的老总都亲自要求我们搞程序搞研发高前端这块的人都必须要上微博啊,还必须得是新浪微博,腾讯微博那是小学生玩的!(//rockyxia:老总是这么说,但是没有贬低腾讯微博的意思) 废话的了一大坨,开始进入正题,今天要搞的是微博那话题和@两个功能,我想大家对这两个功能应该对不陌生了,想一想也知道肯定是通过正则整出来的,今天我给大家分享一下javascript通过正则实现那个话题和@功能,两个功能的实现思想是一样的,就是正则表达式有点区别!

    关于正则表达式,我那个去,学校没好好学,这次可折腾的我啊,网上狂搜,我本来想找一个已经写好的这两个功能的代码的,但是找来找去都没找到完整的,结果那个没办法啊,自己整呗。这段时间一直在使用js写一些东西,所以就用js写了个出来,其他语言实现方法是一样的!

点击进入查看示例:微博的话题和@功能示例

js代码直接贴上:

[javascript]
//话题替换增加连接
function ReplaceTopic(str){
var r, k; // 声明变量。
var ss = str;
r=ss.replace(/\#([^\#|.]+)\#/g, function(word){
k = encodeURI(word.replace(/\#/g,""));
return "<a href=\"#"+ k +"\">" + word + "</a>";
}
);
return(r); //返回替换后的字符串
}
//@替换增加连接
function ReplaceAt(str){
var r, k, url; // 声明变量。
var ss = str;
r=ss.replace(/\@([^\@|.|^ ]+)/g, function(word){
k = encodeURI(word.replace(/\@/g,""));
return "<a href=\"#"+ k +"\" usercard=\"name="+ k +"\">" + word + "</a>";
}
);
return(r); //返回替换后的字符串
}
//输出
document.write(ReplaceAt(ReplaceTopic("类似新浪微博的#话题功能#和@会员 功能的实现,可以有多个#不同的话题#和多个不同的@rockyxia @you 哦")));
[/javascript]

转载请注明:Rockyxia Web技术博客 » Javascrip通过正则实现微博的话题和@功能示例
感谢阅读,如果您发现文章中有表述不准确,欢迎提出来,也欢迎交流相关问题,你可以去这里进行一对一问答交流。

(本篇完)