Utilize an Angular regular expression as a replacement for the href attribute

Question

Utilize an Angular regular expression as a replacement for the href attribute

I am in search of a filter that can replace the "href" attribute within a TextEntity from an API. The "text" may contain 3 different types of URLs. Once the replacement is done, I want to open the corrected URLs in a new separate window.

Here is the information I receive from the text value:

1. <a href="http://someurl.tdl">link</a> - this example includes all kinds of external links such as mysite.com/mypage.html or any other valid URL starting with http://, https://, ftp://.
2. <a href="singpage.html">internal page</a> - This may include various files like mypdf.pdf or mydoc.doc without a full domain in the URL.
3. <a href="mailto: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="177a6e7a767e7b5773787a767e793963737b">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="204d594d41494c60444f4d41494e0e54444c">[email protected]</a></a>

I have attempted something but it did not work.

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

I need the output of the filtered "text" to be as follows:

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: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="660b1f0b070f0a2602090b070f084812020a">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e2337232f27220e2a21232f2720603a2a22">[email protected]</a></a>

To clarify further:

I require a function that transforms these types of URLs.

<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>

into

<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 AN 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>

javascript angularjs json regex ionic-framework

Answer 1

Answer №1

Here is an improved version that functions based on your original 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: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="93feeafef2faffd3f7fcfef2fafdbde7f7ff">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed8094808c8481ad8982808c8483c3998981">[email protected]</a></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

Here is an improved version that functions based on your original 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: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="93feeafef2faffd3f7fcfef2fafdbde7f7ff">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed8094808c8481ad8982808c8483c3998981">[email protected]</a></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 3

Answer №2

Oh, I finally found a working solution!

.filter('modifyText', function ($sce, $sanitize) {
return function ( content ) {
var website = 'http://www.mywebsite.tdl';
content = $sanitize(content);
var source,sear,replacement;
var newContent;
var regex = /href="([\S]+)"/g;
var extMatch = /http|https|\/\//g;
var mtMatch = /mailto:/g;

var divElem = document.createElement("div");
divElem.innerHTML = content;
var anchorList = divElem.getElementsByTagName("a")
var updatedAnchorList = new Array();
var hrefAttr,tag;

if(anchorList.length > 0){

for(var j = 0; j < anchorList.length; j++ ){
  hrefAttr = anchorList[j].getAttribute("href");
  tag = anchorList[j].outerHTML;
  tag = $sanitize(tag);

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

  } else if(hrefAttr.match(mtMatch) != null){
    newContent = tag;
  } else{
    newContent = tag.replace(regex, "class=\"externalURL\" onClick=\"cordova.InAppBrowser.open('" + website + "$1', '_blank', 'location=yes')\"");
  }

  source = content;
  sear = tag;
  replacement = newContent;
  content = content.replace(tag,newContent);
   }  
}
 return $sce.trustAsHtml(content);
     };
 });

Answer 4

Oh, I finally found a working solution!

.filter('modifyText', function ($sce, $sanitize) {
return function ( content ) {
var website = 'http://www.mywebsite.tdl';
content = $sanitize(content);
var source,sear,replacement;
var newContent;
var regex = /href="([\S]+)"/g;
var extMatch = /http|https|\/\//g;
var mtMatch = /mailto:/g;

var divElem = document.createElement("div");
divElem.innerHTML = content;
var anchorList = divElem.getElementsByTagName("a")
var updatedAnchorList = new Array();
var hrefAttr,tag;

if(anchorList.length > 0){

for(var j = 0; j < anchorList.length; j++ ){
  hrefAttr = anchorList[j].getAttribute("href");
  tag = anchorList[j].outerHTML;
  tag = $sanitize(tag);

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

  } else if(hrefAttr.match(mtMatch) != null){
    newContent = tag;
  } else{
    newContent = tag.replace(regex, "class=\"externalURL\" onClick=\"cordova.InAppBrowser.open('" + website + "$1', '_blank', 'location=yes')\"");
  }

  source = content;
  sear = tag;
  replacement = newContent;
  content = content.replace(tag,newContent);
   }  
}
 return $sce.trustAsHtml(content);
     };
 });

Utilize an Angular regular expression as a replacement for the href attribute

Answer №1

Answer №2

Similar questions

The method OnJSAlert in WebChromeClient is failing to execute

Display various v-dialog boxes with distinct contents in a vue.js environment

Display contents while scrolling

obtain the specific attributes of the button that was clicked using jQuery

Mastering the Art of Loading "Please wait" Messages with jQuery BlockUI on Your Website

Removing data from firestore/storage does not follow the expected pathway

Issues with Express routes - encountered POST 404 (Not Found) error

Checkbox fails to display as checked

Take a sequence of multiple words and combine them into a single string with hyphens in between

How to display a video with full height and width using CSS or JavaScript

Establishing data information on dynamically generated HTML

What is the most effective way to send a Json array of objects from a child class component to its parent class component in a React application

tips for setting the value of a checkbox to true in React Material-UI with the help of React Hooks

Tips for adjusting the number of rows in a textarea using Bootstrap

The issue with ReactJS Flask is that a specific webpage link continuously defaults to port 5000 on localhost instead of the intended port 3000

Retrieving information from a JSON file using AngularJS

Reducing the size of XML files in ASP.NET 3.5 returned from WebMethods: Available solutions

Find the target node within the Angular UI Tree

What is the best way to automatically show the last two digits of a phone number in a second text field?

Using jQuery to submit a form and update values