CODEWITHSUNDEEP
actionscript-3
amateurman900
amateurman900

Reputation: 13

Detecting URL in a string, and making only the URL, and nothing else in that string, clickable

(Just to clarify, I have read SOOOO many other posts from this site and other sites and even documentations, I just could not piece together what needs to be done.. sorry.. regex, events, and all that stuff just isn't something I know too much about)

I am a noob at AS3 but I am in progress to learn, basically I have a string called "text" which is well, the text of whatever you send in the chat box in-game, so if you are chatting in game and type in something like "hey guys check out this at http://google.com", that whole string would be the "text" variable, obviously you pros know that already, but anyways, still using that same message as an example, I want basically to add a check to see if "http" is involved in the "text", and if so, to add an EventListener? to that one and only "word" (aka the URL) and to give it to NavigateToURL? action.

I can give it the NavigateToURL? action myself, to be honest, it's really just detecting if the string has "http" in it and for it to dissect that one and only word that contained http to have the EventListener?. I can give the whole text the event listener, but them loading "hey guys check out this at http://google.com" in the URL bar is clearly not professional.

I don't think any code is required to really let you guys know what I need assistance with since I gave the name of variables and what I need done, but here is some code if it helps (non-touched, I erased all my poor edits so that you professionals can apply your effective edits)

I understand from most of the other AS3 Clickable-URL detection posts, regex and whatnot would be required, but I am 100% fine and in fact rather ONLY http needing to be detected, if http is not in the URL being sent in the chat-box, it won't be clickable, simple as that, I don't care if people type "httptroll" and it still has the event listener.

This is the only function in the class, and this is the ChatMessage class as well, as called in the function.

public static function make(
            name:String,
            text:String,
            objId:int = -1,
            numStars:int = -1,
            recipient:String = "",
            isToMe:Boolean = false,
            tokens:Object = null,
            isWhisper:Boolean = false,
            nameColor:int = 1193046,
            textColor:int = 1193046,
            isAdmin:Boolean = false):ChatMessage {
        var msg:ChatMessage = new ChatMessage();
        msg.name = name;
        msg.text = text;
        msg.objectId = objId;
        msg.numStars = numStars;
        msg.admin = isAdmin;
        msg.recipient = recipient;
        msg.isToMe = isToMe;
        msg.isWhisper = isWhisper;
        msg.tokens = tokens == null ? {} : tokens;
        msg.nameColor = nameColor;
        msg.textColor = textColor;
        return (msg);
    }

Upvotes: 1

Views: 78

Answers (1)

obscure
obscure

Reputation: 12891

This depends on how you set up that chat feature but usually it consists of two main elements:

A single textbox where all the messages of the different users go to and another textbox where a user can input some text (and maybe an additional button to actually send the message).

Now you might not be aware of but Flash TextFields are able to render HTML formatted text since it supports some basic HTML tags like <font> <b> and most importantly <a>.

In HTML something (either text or an image) in-between an opening <a> and a closing </a> tag is marked as a clickable hyperlink. The URL it should go to is determined by the href="" attribute.

So to get back to your chatbox, it's just a matter of replacing an occurence of a link inside a string with a html formatted hyperlink.

e.g.

This is my link https://www.startpage.com click it

into

This is my link <a href="https://www.startpage.com">https://www.startpage.com</a> click it

and set the result to the .htmlText property of a dynamic TextField.

This can be done using regular expressions of course but the most straight-forward approach is to search the string for the occurence of http and in case there is one, remember this index and from this position onwards search the string for an occurence of a space (which denotes the end of the url).

Here's a simple example:

    var messages:TextField = new TextField();
    messages.width = 400;
    messages.height = 200;
    messages.border = true;
    addChild(messages);

    var inputBox:TextField = new TextField();
    inputBox.type = TextFieldType.INPUT;
    inputBox.width = 400;
    inputBox.height = 20;
    inputBox.border = true;
    inputBox.y = 200;
    addChild(inputBox);
    inputBox.text = "This is my message https://www.startpage.com and some more text";
    messages.htmlText = containsLink(inputBox.text);
}

private function containsLink(inp:String):String
{
    var url:String = "";
    var start:int = inp.indexOf("http");
    var end:int;
    if (start != -1)
    {
        end = Math.min(inp.length, inp.indexOf(" ", start));
        url = inp.substring(start, end);
        inp = inp.replace(url, "<b><a href='" + url + "'>" + url + "</a></b>");
    }

    return inp;
}

Upvotes: 1

Related Questions