将href替换为angular正则表达式

replace href with angular regular expression

本文关键字：angular 正则表达式 替换 href      更新时间：2023-09-26

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

我从文本值中收到以下信息：

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);
    }
});

我需要这个输出"文本"运行通过过滤器：

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>

以下是基于原始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>

Hm，好吧，我现在有一个解决方案。。。

.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);
     };
 });
相关文章：