Last active
June 5, 2020 19:25
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
}; | |
} | |
]); |
Can I use and change this source code in project?
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;
};
}
]);
I have updated the code to match the new requirements in the latest angular (1.5.X)
is it possible to inject ng-href in it? tried but angular doesn't insert ng-href as attribute, only href
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
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