1

The idea is taken from here

I have the following code:

myApp.filter('parseUrlFilter', function () {
var urlPattern = /^E\d{5}-\d{2}$/;
return function (text, target) {
    return text.replace(urlPattern, '<a target="' + target + '" href="http://somepage.com?number=$&">$&</a>') + " | ";
};
});

I'm still trying to understand how this code exactly works but it does not convert the text to URL.

Like E12345-01 does not become somepage.com?number=E12345-01

I think I'm missing something about how the regex works here. Any help will be appreciated.

Edit: added plnkr with somewhat working answer of machinehead115

Community
  • 1
  • 1
Gaurav Goenka
  • 152
  • 12

4 Answers4

1

Without seeing you HTML code I assume that you are actually binding / using the filter there, like so:

<div ng-bind-html="'E12345-01' | parseUrlFilter:'_blank'"></div>

In order to have the filter actually output the link text as code you need to include $sce as a dependency of filter and return the link using $sce.trustAsHtml(link):

angular.module('app', [])
  .filter('parseUrlFilter', function($sce) {
    var urlPattern = /^E\d{5}-\d{2}$/;
    return function(text, target) {
      return $sce.trustAsHtml(text.replace(urlPattern, '<a target="' + target + '" href="http://somepage.com?number=$&">$&</a>') + ' | ');
    };
  });

Here is an example plnk of the code working.

machinehead115
  • 1,647
  • 10
  • 20
  • This is exactly what I've been looking for. Two questions: 1) how does sce work? I just haven't been able to figure out why $sce is needed here. 2) This does not work in my code right now. Gives a `parseUrlFilterFilterProvider` error. I maintain an app.js where I write the common services/directives and one controller.js. I D.I.'d this in my controller but that gave another similar error. Any idea how I deal with this? – Gaurav Goenka Nov 24 '16 at 12:17
  • Made a sample [plnk](http://plnkr.co/edit/uhq2d2LQQ3LAqX2fCQrl?p=preview) – Gaurav Goenka Nov 24 '16 at 12:52
  • Here, I updated the [plnk](http://plnkr.co/edit/GuKyCrnERzgMUX2vqGJ8?p=preview) for you. You don't need to wrap the filter in a `document.ready()`. Take a look at the $sce link in my answer above, but the basic info is _SCE assists in writing code in a way that (a) is secure by default and (b) makes auditing for security vulnerabilities such as XSS, clickjacking, etc. a lot easier._ – machinehead115 Nov 24 '16 at 16:48
  • Tried everything except ` – Gaurav Goenka Nov 24 '16 at 17:07
  • Hey, my data is not from a JS/ static data. It comes from a `$http.get` service. I get a `cmProvider%20%3C-%20%24scm%20%3C-%20parseUrlFilterFilter` error when the ng-repeat finally runs. How I can resolve this? Removing the filter makes the data load properly. – Gaurav Goenka Nov 28 '16 at 12:55
  • I can't really tell what error you're getting but I updated the plnk to provide some error checking: http://plnkr.co/edit/U3goNTHSFcnUuwLtxNvY?p=preview – machinehead115 Nov 28 '16 at 15:15
  • I just realised what a blunder I was making. wrote `$scm` instead of `$sce`. Realised from my error statement mentioned in the last comment. Ignore me, bad day! – Gaurav Goenka Nov 28 '16 at 19:21
0

I'm not sure I understand your question, nor your context. My assumption is that you need to extract the number from an incomingString and use that number to generate a new link string. Given those requirements, the below would get you going...

//this var represents the string that would hold the identifier you're interested in
var originString = "blah blah blah E12345-01 more blah blah blah";
function DoIt(incomingString)
{
    //create a regex pattern
    var urlPattern = new RegExp(/E\d{5}-\d{2}/);
    //get the match
    var theMatch = urlPattern.exec(incomingString);
    //add the match to your new url
    var returnString = "www.whateversite.com/number=" + theMatch;
    //from here you can do whatever you want with that string
    //for now, I'll just return it as is...
    return returnString;
}
console.log(DoIt(originString));
blaze_125
  • 2,262
  • 1
  • 9
  • 19
-1

here is the working regex for you

([E]\d{5}-\d{2})

check here https://regex101.com/r/O6YFlj/1

Atmahadli
  • 687
  • 8
  • 14
  • This doesn't really help his regex, it makes it more generic, and it doesn't do anything to actually make the link appear on the page. – machinehead115 Nov 23 '16 at 20:56
-1

The problem is not in your URL matching and replacement code. I extracted the following from your code and used it. Worked perfect:

<script>
var urlPattern = /^E\d{5}-\d{2}$/;
var text = "E12345-01";
document.write(text.replace(urlPattern, '<a href="http://somepage.com?number=$&">$&</a>') + " | ");
</script>

The issue must be with the value of text. use console.log(text) to see whether you're getting the right value in your variable or not.

owaisafaq
  • 523
  • 4
  • 7