用角度正则表达式替换href答案

【问题标题】：replace href with angular regular expression用角度正则表达式替换href
【发布时间】：2016-12-12 22:33:56
【问题描述】：

我正在寻找一个过滤器来替换 API 的 TextEntity 中的“href”。 “文本”可以包含 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);
    }
});

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

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>

【问题讨论】：

嗯，你确定这是预期的结果吗？这对您已经拥有的代码毫无意义..
我想我的代码只是用类和 onclick 事件扩展了 a href...我也尝试替换了 href。没有有效域（实习生网址）的 href。
我的意思是：为什么是第一个。和第 3 个。 urls （在您的预期结果中）不会更改 href??
第一个工作正常，但第二个和第三个没有 - 第二个是没有域的链接，我想用 newStringUrl 替换它，第三个没有被我以任何方式处理代码，我也不知道如何处理它。
好吧，我还是无法理解你的逻辑。在第 1 个。例如，您有：<a href="http://someurl.tdl">，而您不想想要更改它（根据您的预期结果）——第三个也是如此。例子。但是在你的第二个。例如，您想更改href。它的逻辑是什么？为什么不是所有 3 都应该改变？它们有什么区别？

标签： javascript angularjs json regex ionic-framework

【解决方案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>

【讨论】：

起初 - 谢谢，但这不是我想要的 - 在我的情况下，文本不是一个数组，它是一个字符串，你的解决方案只适用于以 " 结尾的域tdl”，但外部 url 也可以是“stackoverlow.com/questions/3888... /somepage.html”。
@Marq，好吧，你说：““文本”可以包含 3 种 url。”，我根据你说的工作。这也只是一个例子。过滤器适用于一切。请编辑您的问题，发布您拥有的所有网址以及预期结果是什么。
sry，我尽力了 - 但我对 javascript 和 stackoverflow 都很陌生 :()
@Marq，你现在检查了吗？

【解决方案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);
     };
 });

【讨论】：