{"id":17275,"date":"2015-02-13T16:30:22","date_gmt":"2015-02-13T11:00:22","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=17275"},"modified":"2017-11-22T16:00:23","modified_gmt":"2017-11-22T10:30:23","slug":"highlighting-links-in-text-using-linky-filter","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/highlighting-links-in-text-using-linky-filter\/","title":{"rendered":"Highlighting links in text using “linky” filter"},"content":{"rendered":"

At times\u00a0we come across few\u00a0cases where we need to differentiate the links amongst the plain text. Angular provide us with a very useful filter named : “linky”\u00a0<\/strong>which help us to do so.<\/p>\n

With the help of linky<\/strong> filter we can detect links from text and show them differently . \u00a0Linky takes text and produces HTML\u00a0by wrapping all URLs\u00a0into anchor tags. It supports email address , http, https, and mailto.<\/p>\n

For this you would require the ngSanitize<\/strong> module in angular app.<\/p>\n

In HTML\u00a0binding<\/p>\n

<p ng-bind-html=”myText | linky”> <\/p><\/p>\n

You can also define the target for high-lighted links like this-<\/p>\n

<p ng-bind-html=”myText | linky :’_blank'”><\/p>\n

[js]<\/p>\n

<!DOCTYPE html>
\n<html>
\n<head lang="en">
\n <meta charset="UTF-8">
\n <title>Lets try linky filter<\/title>
\n <script type="application\/javascript" src="angular.js"><\/script>
\n <script src="LinkyCtrl.js"><\/script>
\n <script src="http:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.2.1\/angular-sanitize.min.js"><\/script>
\n<\/head>
\n<body>
\n<div ng-app="myApp" ng-controller="myController">
\n <div>
\n <p ng-bind-html="myText | linky :’_blank’"><\/p>
\n <textarea ng-model="myText" style="width: 420px; height: 120px"><\/textarea>
\n \u00a0 \u00a0<\/div><\/p>\n

<\/div><\/p>\n

<\/body><\/p>\n

<\/html><\/p>\n

[\/js]<\/p>\n

In our angular controller,<\/p>\n

[js]<\/p>\n

var myApp = angular.module(‘myApp’, [‘ngSanitize’])
\n .controller(‘myController’, [‘$scope’, function ($scope) {
\n $scope.myText = "Some default text is here http:\/\/www.intelligrape.com\/";
\n}]);<\/p>\n

[\/js]<\/p>\n

So in this way we can quickly highlight the links in angular.<\/p>\n

Hope this helps.<\/p>\n","protected":false},"excerpt":{"rendered":"

At times\u00a0we come across few\u00a0cases where we need to differentiate the links amongst the plain text. Angular provide us with a very useful filter named : “linky”\u00a0which help us to do so. With the help of linky filter we can detect links from text and show them differently . \u00a0Linky takes text and produces HTML\u00a0by […]<\/p>\n","protected":false},"author":146,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":4,"footnotes":""},"categories":[1185],"tags":[1186,55,1636,1635],"class_list":["post-17275","post","type-post","status-publish","format-standard","hentry","category-node-js-2","tag-angular-js","tag-javascript","tag-linky","tag-ngsanitize"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t