Any directive or filter to replace from mention to link?

[leocaseiro]

I'd like to build a filter or a directive to bind a div/p(wherever) with my content and than, I'd like to replace every key into a link, similar twitter tags and users.

I have an idea, but I was wondering if someone can give me a better solution.

The idea is replace from:

<p>This is comment from @leocaseiro about #mentio directive.</p>

The idea is replace to:

<p>This is comment from <a href="http://userprofileurl.com.br">Leo Caseiro</a> about <a href="http://tagurl.com">#mentio</a> directive.</p>

For example:

<p>{{comment | mentionToLink:'@':'usersList' | mentionToLink:'#':'tagsList'}}</p>

$scope.comment = "This is a test from @leocaseiro about the #mention directive."

app.filter('mentionToLink', function() {
    return function(input, searchTrigger, listItems) {
        //...some ajax request for search
        //some regEx to find every key
        //replace each key with each link from the listItems
        input.replace(key, '<a href="' + url + '">' + key + '</a>');
        return input;
    };
});

[ryaz]

@leocaseiro look at https://www.npmjs.com/package/text-autolinker

[leocaseiro]

Thank you for your reply @ryaz, but I'm actually not using Twitter. I have my own list of users with our own Profile page and I'd like to link their name with our own page. I'm not sure if the text-autolinker works well outside twitter, but I'll give a try. Thanks

[shyamal890]

@leocaseiro Did you find answer to your question? This link does mention "converting the selected item to markup"

[Bjeaurn]

There's a directive/plugin called "Hashtagify" that helped out with this. It wasn't the best, but it got the job done as long as you have control over your full application.

I've there's a "builtin" way to do this with ment.io, I'd be happy to learn about that or maybe help with writing a plugin for that.

[shyamal890]

Linking similar issue raised earlier: https://github.com/jeff-collins/ment.io/issues/25

@leocaseiro You can do something like this: PLUNKER

NOTE: Most of the code is from the repository demo itself.

[leocaseiro]

Sorry, I didn't have time to have a look. My issue is from October last year, I'm not sure if I gave up or tried something else...I'll find and post it here.