Angularjs regex filter: applying regular expressions to filter data

I've created a regex pattern to match URLs like this:

/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/

Now, I need to incorporate this regex into a filter that will specifically extract the URL from a given value:

The area where I want to implement this is here:

return arr[i].text;

Filter Implementation

    app.filter('getFirstCommentFrom',function(){
  return function(arr, user){
    for(var i=0;i<arr.length;i++)
    {
      if(arr[i].from.username==user)
        return arr[i].text;
    }
    return '';
  }
})

{{p.comments.data|getFirstCommentFrom:'machinas_test'}}

I'm unsure about how to incorporate this functionality.

Answer №1

Let's kick things off with a snippet similar to this

app.filter('extractUserComment',function(){
  var pattern = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/

  return function(commentArray, specifiedUser){
    for(var index=0;index<commentArray.length;index++){
      if(commentArray[index].from.username==specifiedUser){
        return commentArray[index].text.replace(pattern, REPLACEDCONTENT);
      }
    }
    return '';
  }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with ThreeJS CSG when trying to intersect extruded geometries

element, I'm facing a challenge with extracting multiple views and intersecting them to form a final polygon. The issue arises when there are floating extra parts in the result that are unexpected. My goal is to find a solution to detect these extrane ...

The Javascript slider fails to function properly when utilizing AJAX to load the page

I have encountered an issue while trying to open an HTML page using ajax when a button is clicked. The HTML page that I am opening contains a JavaScript slider that functions properly when opened individually, but stops working if opened through my index. ...

Personalized Owl Carousel - OWL.JS Hover Pause Feature

I have been working on a slider in Codepen that is functioning well, and now I am trying to tweak it for my website. My goal is to make the carousel pause when someone hovers over it. I've experimented with all the options available on the owl slider ...

Display the logout button in AngularJS upon clicking the SignIn button

I have a login form in a specific partial that is displayed within the main page's body. The file for the login form is named login.html. <form name="loginForm" class="form-horizontal" ng-controller="loginController" ng-submit="submit()" noval ...

What is the process for deleting a token from local storage and displaying the logout page in Next JS?

I developed a Next.js web application and am looking to display a logout page when the token expires, while also removing the expired token from local storage. How can I ensure that this functionality works no matter which page the user visits within the a ...

Navigating Angular: A Beginner's Guide to Routing

As I delve into the world of Angular and embark on creating my very first app, I find myself in need of assistance with setting up routing. Directory Layout spa/ index.html controllers/ controllers.js images/ javascript/ app.js resource ...

Trouble arises when attempting to create a two-column layout using Material UI's <Grid> component

My goal is to create a two-column layout where each column takes up half of the screen and has equal height. To better illustrate, take a look at this image. The code I've tried so far is not working as expected: import React from "react"; import { ...

Fetch data using Ajax without the need for a hash signal

My current goal is to load content through Ajax on a website. Let's say our main page is example.com/blankpage (I've eliminated the .html extension using htaccess). At the moment, I have it set up so that when a link on the page directs to mysite ...

Exploring elements with Watir WebDriver and ExtJS

Currently, I am performing an acceptance test using watir-webdriver with Ruby. I have a question regarding ExtJs support with Watir webdriver. Is it possible to locate elements that are dynamically generated by ExtJS? I have attempted the following: @brow ...

Learn how to update a fixed value by adding the content entered into the Input textfield using Material-UI

I made a field using the Input component from material-ui: <Input placeholder="0.00" value={rate} onChange={event => { this.setState({ `obj.rate`, event.target.value }); }} /> Whenever I input a rate into this field, ...

I am having trouble with setInterval not functioning as expected. I am trying to make a function repeat every 500ms using setInterval, but it seems to be ineffective

var direction; function movement(){ switch(direction){ case 1: positionX = positionX + 10; break; case 2: positionX = positionX - 10; break; case 3: positionY = positionY - 10; bre ...

The Vue JS Router is prominently displayed in the center of the webpage

I have been delving into Vue JS and working on constructing an app. I've implemented vue router, however, it seems to be causing the content within the routed component to display with excessive margins/padding. I've attempted various solutions s ...

What are the steps to set up ChartJS on a personal computer?

Currently, I am working on creating charts with ChartJS using the CDN version. However, I would like to have it installed directly on my website. After downloading ChartJS v4.1.1, I realized that it only contains typescript files. Since I cannot use TS fil ...

Module Express - Transferring Object to Main Application

Having issues with passing an object in Express from a module to my application. The process is straightforward - gathering input from a form, validating the string, and returning either null or an object. Despite trying various methods, I'm still fac ...

How can I filter an array by a nested property using Angular?

I need help with objects that have the following format: id: 1, name: MyObj properties: { owners: [ { name:owner1, location: loc1 }, { name:owner2, location: loc1 } ] } Each object can have a different number of owners. I' ...

Tips for extracting title and image from someone else's blog posts to share on your own website

Currently, I am in the process of creating a website where I can showcase my personally curated content. I have been struggling to figure out how to seamlessly integrate this content into my site without relying on an API. My initial idea was to manually ...

How can you find the index of an HTML element while excluding any clearfix divs?

In the process of developing a CMS, I find myself in need of determining the index of the element I am currently working on. Consider the following stripped-down HTML structure: <div class="row"> <article class="col-md-4 col-sm-4 project" &g ...

Is there a way to create a custom column in Tabulator that displays a calculated value for every row?

Can a custom column be added with a calculated value for each row? For example, if col 1 has the value "3" and col 2 has the value "5", then I want a dynamic col 3 with a sum value of 8. I am utilizing Vue Tabulator. Below is my Table.vue component. <t ...

Creating endless scroll feature in Vuetify's Autocomplete component - A comprehensive guide

Having trouble with my Vuetify Autocomplete component and REST API backend. The '/vendors' method requires parameters like limit, page, and name to return JSON with id and name. I managed to implement lazy loading on user input, but now I want i ...

Adjusting image dynamically based on conditions

I need to dynamically display images on my HTML based on specific conditions using TypeScript. In my TypeScript file: styleArray = ["Solitary", "Visual","Auditory","Logical","Physical","Social","Verbal",]; constructor(){ for (var i = 0; this.sty ...