Skip to content

Instantly share code, notes, and snippets.

@rishabhmhjn
Last active June 5, 2020 19:25
Show Gist options
  • Star 21 You must be signed in to star a gist
  • Fork 7 You must be signed in to fork a gist
  • Save rishabhmhjn/7028079 to your computer and use it in GitHub Desktop.
Save rishabhmhjn/7028079 to your computer and use it in GitHub Desktop.
This is an AngularJS filter to linkify #hashtags and @mention texts into respective Twitter URLsDemo - http://plnkr.co/edit/vrdgxU?p=preview
var app = angular.module('tLinky', ['ngSanitize']);
app.filter('tweetLinky',['$filter', '$sce',
function($filter, $sce) {
return function(text, target) {
if (!text) return text;
var replacedText = $filter('linky')(text, target);
var targetAttr = "";
if (angular.isDefined(target)) {
targetAttr = ' target="' + target + '"';
}
// replace #hashtags
var replacePattern1 = /(^|\s)#(\w*[a-zA-Z_]+\w*)/gim;
replacedText = replacedText.replace(replacePattern1, '$1<a href="https://twitter.com/search?q=%23$2"' + targetAttr + '>#$2</a>');
// replace @mentions
var replacePattern2 = /(^|\s)\@(\w*[a-zA-Z_]+\w*)/gim;
replacedText = replacedText.replace(replacePattern2, '$1<a href="https://twitter.com/$2"' + targetAttr + '>@$2</a>');
$sce.trustAsHtml(replacedText);
return replacedText;
};
}
]);
@djds4rce
Copy link

djds4rce commented Mar 6, 2014

In the latest version of angular you will have to inject the $sce service and mark the html as unsafe to render links and other tags

$sce.trustAsHtml(replacedText);

@bjoernwenzel-tommapps
Copy link

Can I use and change this source code in project?

@juancarloscruzd
Copy link

I improved your code, with facebook support.

    app.filter('hashtags',['$filter', '$sce', 
        function($filter, $sce) {
            return function(text, target, type) {
            if (!text) return text;
        var replacedText = $filter('linky')(text, target);
        var targetAttr = "";
        if (angular.isDefined(target)) {
            targetAttr = ' target="' + target + '"';
        }
        if(type === 'twitter'){
            // replace #hashtags and send them to twitter
            var replacePattern1 = /(^|\s)#(\w*[a-zA-Z_]+\w*)/gim;
            replacedText = text.replace(replacePattern1, '$1<a class="hashtag" href="https://twitter.com/search?q=%23$2"' + targetAttr + '>#$2</a>');
            // replace @mentions but keep them to our site
            var replacePattern2 = /(^|\s)\@(\w*[a-zA-Z_]+\w*)/gim;
            replacedText = replacedText.replace(replacePattern2, '$1<a class="hashtag" href="https://twitter.com/$2"' + targetAttr + '>@$2</a>');
        } else if(type === 'facebook'){
            // replace #hashtags and send them to facebook
            var replacePattern1 = /(^|\s)#(\w*[a-zA-Z_]+\w*)/gim;
            replacedText = text.replace(replacePattern1, '$1<a class="hashtag" href="https://facebook.com/hashtag/$2"' + targetAttr + '>#$2</a>');
        }


        $sce.trustAsHtml(replacedText);
        return replacedText;
    };
}

]);

@rishabhmhjn
Copy link
Author

I have updated the code to match the new requirements in the latest angular (1.5.X)

@b441berith
Copy link

is it possible to inject ng-href in it? tried but angular doesn't insert ng-href as attribute, only href

@Mehtakanika92
Copy link

I want to show the image of link in my tweet text please help??

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment