Question

我正在寻找一个过滤器来替换＆＃34; href＆＃34;在API的TextEntity中。＆＃34;文字＆＃34;可以包含3种不同类型的URL。替换后，我想在一个新的单独窗口中打开更正的URL。

我从textvalue收到以下信息：

1. <a href="http://someurl.tdl">link</a> - this is an example for a all kind of external links. Can be mysite.com/mypage.html or any other valid url. Like everything with a http://, https://, ftp:// in the startof the url.
2. <a href="singpage.html">internal page</a> - Can includes all other files. like mypdf.pdf or mydoc.doc or other stuff, but without http://mydomain.tdl
3. <a href="mailto: mymail@domain.tdl">mymail@domain.tdl</a>

我尝试了一些东西，但它没有用。

.filter('parseText', function ($sce, $sanitize) {
var mydomain = 'http://www.mydomain.tdl';
return function (text) {
    var newStringUrlReplace = $sanitize(text).replace('href="','href="'+mydomain);
    var regex = /href="([\S]+)"/g;
    var newString = newStringUrlReplace.replace(regex, "class=\"externalURL\" onClick=\"cordova.InAppBrowser.open('$1', '_blank', 'location=yes')\"");
    return $sce.trustAsHtml(newString);
    }
});

我需要输出＆＃34; text＆＃34;跑了过滤器：

1. <a href="http://someurl.tdl" class="externalURL" onClick="cordova.InAppBrowser.open('http://someurl.tdl', '_blank', 'location=yes')">link</a>
2. <a href="http://www.mydomain.tdl/singpage.html" onClick="cordova.InAppBrowser.open('http://www.mydomain.tdl/singpage.html', '_blank', 'location=yes')">internal page</a>
3. <a href="mailto: mymail@domain.tdl">mymail@domain.tdl</a>

为了更容易理解：

我需要一个可以转换这类URL的函数。

<a href="http://someurl.tdl/whichcanincludeanything.html?bar=foo">URL TO A  EXTERNAL PAGE</a>

<a href="singpage.html">internal page of the CMS</a>

进入

<a href="http://someurl.tdl/whichcanincludeanything.html?bar=foo" class="externalURL" onClick="cordova.InAppBrowser.open('http://someurl.tdl/whichcanincludeanything.html?bar=foo', '_blank', 'location=yes')">URL TO A  EXTERNAL PAGE</a>

<a href="http://www.mydomain.tdl/singpage.html" onClick="cordova.InAppBrowser.open('http://www.mydomain.tdl/singpage.html', '_blank', 'location=yes')">internal page</a>

Answer 1

以下是基于原始 code的版本：

(function() {
  angular
    .module('app', ['ngSanitize'])
    .controller('MainCtrl', MainCtrl)
    .filter('parseText', parseText);

  function MainCtrl($scope) {
    $scope.array = [
      '<a href="http://someurl.tdl">link</a>',
      '<a href="singpage.html">internal page</a>',
      '<a href="mailto: mymail@domain.tdl">mymail@domain.tdl</a>',
      '<a href="http://someurl.tdl/whichcanincludeanything.html?bar=foo">URL TO A  EXTERNAL PAGE</a>',
      '<a href="singpage.html">internal page of the CMS</a>'
    ];
  }

  function parseText($sce) {
    var myDomain = 'http://www.mydomain.tdl/';
    var externalRegex = /([http|https|ftp]+:\/\/[^"]*)/g;
    var internalRegex = /(href=)"([^"]*)/g;
    return function(input) {
      if (!input) return;
      if (input.indexOf('mailto: ') !== -1) return input;
      var url = '';
      if (externalRegex.test(input)) {
        url = input.replace(externalRegex, '$1" class="externalURL" onClick="cordova.InAppBrowser.open(\'$1\', \'_blank\', \'location=yes\')');
      } else {
        url = input.replace(internalRegex, '$1 ' + myDomain + '$2' + ' class="externalURL" onClick="cordova.InAppBrowser.open(\'' + myDomain + '$2' + '\', \'_blank\', \'location=yes\')');
      }
      return $sce.trustAsHtml(url);
    }
  }
})();

<!DOCTYPE html>
<html ng-app="app" >

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-sanitize.min.js"></script>
</head>

<body ng-controller="MainCtrl">
  <p ng-repeat="url in array track by $index">
    <span ng-bind-html="url | parseText"></span>
  </p>
</body>

</html>

Answer 2

嗯，好吧，我现在有一个解决方案......

.filter('parseText', function ($sce, $sanitize) {
return function ( text ) {
var mydomain = 'http://www.mydomain.tdl';
text = $sanitize(text);
var source,sear,repl;
var newString;
var regex = /href="([\S]+)"/g;
var extMatch = /http|https|\/\//g;
var mtMatch = /mailto:/g;

var div = document.createElement("div");
div.innerHTML = text;
var aList = div.getElementsByTagName("a");
var aListNew = new Array();
var href,t;

if(aList.length>0){

for(var i = 0; i<aList.length; i++ ){
  href = aList[i].getAttribute("href");
  t = aList[i].outerHTML;
  t = $sanitize(t);

  if(href.match(extMatch)!=null){
    newString = t.replace(regex, "class=\"externalURL\" onClick=\"cordova.InAppBrowser.open('$1', '_blank', 'location=yes')\"");

  } else if(href.match(mtMatch)!=null){
    newString = t;
  } else{
    newString = t.replace(regex, "class=\"externalURL\" onClick=\"cordova.InAppBrowser.open('"+mydomain+"$1', '_blank', 'location=yes')\"");
  }

  source = text;
  sear = t;
  repl = newString;
  text = text.replace(t,newString);
     }   
 }
 return $sce.trustAsHtml(text);
     };
 });

用角度正则表达式替换href

2 个答案: