链接上的mailto协议以HTML标签打开

Question

I am using the following code in angular JS template to open outlook with some fields pre filled.

<a href="mailto:{{item.caseOwner}}?subject= Case {{item.caseNumber}}">OWNER</a>

where -

item.caseOwner = abc@xyz.com;

This works fine when item.caseOwner is a string. But in some scenarios, it comes wrapped in an HTML tag for the highlighting purpose.

item.caseOwner = <span class"highlight">abc@xyz.com<span>;

In this case the outlook opens up with HTML tags and it makes no meaning. Is there a way to extract the string inside the <span></span> before the user clicks the link ?

Answer 1

Create a custom filter to cleanup item.caseOwner .

<a href="mailto:{{item.caseOwner | asEmail }}?subject= Case {{item.caseNumber}}">OWNER</a>

For cleaning up span tags, a search-replace can be implemented like so.

function asEmailFn(emailAddressOrMarkup) {
    return emailAddressOrMarkup
        .replace(/<[\/]*?span.*?>/g, '');
}

angular.module('App', [])
.filter('asEmail', function() {
  return asEmailFn;
})
.controller('TestController', ['$scope', 'asEmail', function($scope, asEmail) {
}]);

Answer 2

Here is how I have done it.

In the main parent controller of application ie alias home

home.stripOffHTML = function(itemString){
    let localString = itemString;
    if(localString){
      return localString.replace(/<\/?[^>]+(>|$)/g, "");
    }
};

In the HTML code:

<a href="mailto:{{home.stripOffHTML(item.caseOwner)}}?subject=Case {{item.caseNumber}}">OWNER</a>