url网址文本解析成超链接

在大家松鼠机器人时,遇到回复内容只能是文本的问题(我想回复的内容出现超链接)。请求好友帮助解决了此问题,现在分享给大家。机器人搭建自 Github/kompasim 的 chatbot 项目。

原始添加回复内容的js函数为

function AddText(user, message) {
    console.log(user);
    console.log(message);

    var div = $('<div>');
    var name = $('<labe>').addClass('name');
    var text = $('<span>').addClass('message');

    name.text(user + ':');
    text.text('\t' + message);

    div.append(name);
    div.append(text);

    $('.chatBox').append(div);
    $('.chatBox').scrollTop($(".chatBox").scrollTop() + 100);
}

现在修改为

function AddText(user, message) {
        console.log(user);
        console.log(message);

        var div = $('<div>');
        var name = $('<labe>').addClass('name');
        var reg=/(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g; 
        
        if(message.indexOf('http') != -1){
            var url = message.match(reg);
            console.log(url);
            var text=$('<span>');
            var a = $('<a>').addClass('message').attr('href',url).attr('target','_blank');
            a.text(url);
            text.append(a);
            text.append(message.replace(reg,''));
            name.text(user + ':');
        }
        else{
            var text = $('<span>').addClass('message');
            name.text(user + ':');
            text.text('\t' + message);
        }
       
        div.append(name);
        div.append(text);
       
        $('.chatBox').append(div);
        $('.chatBox').scrollTop($(".chatBox").scrollTop() + 100);
}

主要是添加了http文本判断,用正则表达式提取网址,然后html超链接输出,如果后面有其他文本则加上。缺点是只能匹配一个超链接,如果出现多个就会出错。不知有没有大神会多个超链接的匹配的?

参考资料:蚂蚁部落-输入url网址即可将其解析成可点击的链接

本文采用 CC BY-NC-SA 3.0 Unported 许可,转载请以超链接注明出处。
原文地址:url网址文本解析成超链接 作者:松鼠小
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: Telegram @AmashiroNatsukiEars_NoWord Sticker
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
AmashiroNatsukiEars
小恐龙
花!
上一篇
下一篇