How can I use regex within a pipe to split a string in Angular 4?

I need to implement a method where I can split a string based on special characters and spaces in the given regex format, excluding "_".

Example: #abc_xyz defgh // output #abc_xyz

Example: #abc@xyz defgh // output #abc

Example: #abc%xyz&defgh // output #abc

Example: #abc$xyz*defgh // output #abc

Below is the code snippet that I am currently using:

split.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'splitString'
})
export class splitString implements PipeTransform {
transform(value:string, [separator]):string {
    let reg = new RegExp (separator);
    let splits = value.split(separator);
    if(splits.length > 1) {
   // FOR LOOP - Check index [0],[1].. are not empty. If value is Empty then Don't return.
        for( let i=0; i<splits.length;i++){ 
            if(splits[i].length > 0){
                return splits[i];
            }
        }
    } else {
      return '';
    }
  }
}

myComponent.html {{ data | splitString:"(?:^|\s)\#(\w+)"}}

Answer №1

Perhaps the following solution could be of assistance to you.

{{ content | separateText:["(?:^|\s)\#(\w+)"] }}

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

Guide on accessing js file in an Angular application

I have a component where I need to create a function that can search for a specific string value in the provided JavaScript file. How can I achieve this? The file path is '../../../assets/beacons.js' (relative to my component) and it's named ...

Using TypeScript with Vue and Pinia to access the store

Is it necessary to type the Store when importing it to TypeScript in a Pinia Vue project? // Component <p>{{ storeForm.firstName }}</p> // receiving an error "Property 'storeForm' does not exist on type" // Store ...

Can you explain the distinction between App: React.FunctionComponent and App = (): React.FunctionComponent()?

Currently exploring the depths of typescript. Can someone clarify the distinction between these two code snippets: const App: React.FunctionComponent<CustomProps> = (props: CustomProps) => { return <div>Hello World!</div>; }; and: ...

What is the reason for TypeScript's refusal to accept this task?

In my attempt to create a type that can be A, B, or an object with a key containing an array of 2 or more items that are either A, B, or another similar object (thus allowing for recursive definition). This is the solution I came up with: type A = { p ...

Error message on Angular 4: "404 - Unable to locate file

Currently, I am working with Angular 4 and attempting to load .csv data. For reference, I have been following this guide: . However, I am facing issues while trying to load the sample.csv file. Despite trying to place the file in src/app, src, or root dire ...

Ways to selectively deactivate client-side functionality

I have implemented a server-side rendered app with transitions, including a 404 error page that I placed in a lazy module to avoid increasing the size of loaded JavaScript. While this setup is functioning correctly, there is some flickering when the clien ...

The element is implicitly classified as an 'any' type due to the index expression not being of type 'number'

Encountering a specific error, I am aware of what the code signifies but unsure about the correct interface format: An error is occurring due to an 'any' type being implicitly assigned as the index expression is not of type 'number'. ...

Can Ansible and Pulumi be integrated to work together effectively?

Is it possible to create multiple DigitalOcean droplets in a loop and then use Ansible to configure software and security measures on them, similar to how Terraform works? If so, what would the JavaScript/TypeScript code for this look like? I couldn' ...

Using styled-components to enhance an existing component by adding a new prop for customization of styles

I am currently using styled-components to customize the styling of an existing component, specifically ToggleButton from material ui. However, I want my new component to include an additional property (hasMargin) that will control the style: import {Toggle ...

Angular component linked to a dynamic object requiring user confirmation before changing or reverting to the original value

I've been working on getting a simple <select> behavior where the value reverts back if the user cancels the change. I managed to achieve it, but it took me quite a few hours and I'm not entirely satisfied with the implementation as it&apos ...

The offsetTop property of Angular's nativeElement always returns a value of 0

I am currently working on a menu that will automatically select the current section upon scrolling. However, I am running into an issue where I am consistently getting a value of 0 for the offsetTop of the elements. The parentElement returns a value for of ...

Is there a different approach available since the array function "some" does not restrict type even when a type predicate is implemented?

It is expected that when using the array function "some" along with a type predicate and return statement, the TypeScript compiler would narrow down the type of dashArray. Is it reasonable to expect this behavior from the TypeScript compiler or am I incor ...

Creating personalized labels with icons in Echarts

Can eCharts handle this task? I am looking to include a Label along with the current value. I have successfully almost replicated the image shown above. However, I need the Symbol to change based on the Label content and turn either green or red. The doc ...

Angular 2's SVG creations do not resize properly

It is a common knowledge that an svg element with the attribute viewbox should automatically scale to fit the sizes specified in the styles. For instance, let's consider a 200*200 circle placed inside a 100*100 div. Prior to that, we need to ensure t ...

Angular Tutorial: Modifying the CSS transform property of HTML elements within a component directly

Currently, I'm in the process of developing an analog clock for a project using Angular. My challenge is figuring out how to dynamically update the sec/min/hour handlers on the clock based on the current time by manipulating the style.transform prope ...

Enhance your text in TextInput by incorporating newline characters with advanced editing features

I'm encountering an issue with my Textarea component that handles Markdown headers: type TextareaProps = { initValue: string; style?: StyleProp<TextStyle>; onChange?: (value: string) => void; }; type OnChangeFun = NativeSynthetic ...

Do I need to be concerned about a bot attack if my form does not submit to a specific endpoint in a single-page application (SPA)?

My latest project involves a form with fields for email and password, but instead of POSTing the data, it simply calls a function upon submission. Although I'm using Angular, I wonder if I should be worried about potential bot attacks. Do you think I ...

Need to transfer data from an Angular 5 application to a server-side file using PHP, but

I am experimenting with sending an encrypted variable from Angular to a PHP script for testing purposes. Below is the client-side script: ngOnInit(){ let user = "am"; let key = "pizza"; let enc = crypto.AES.encrypt(user, key); console.log(enc); let dec = ...

Encountering an error message that states "Unable to read property 'next' of undefined" while utilizing the async

Operating a service similar to this involves simulating an API call. import { Injectable } from '@angular/core'; import { Observable, Subscriber} from 'rxjs'; import { DeviceStatus } from '../models/device-status-model'; @I ...

Utilizing mat dialog in conjunction with the bootstrap sticky top class to enhance functionality

I am encountering an issue where, upon clicking to delete an entry, a mat dialog should appear with everything else in the background greyed out. However, the problem I am facing is that when I attempt to delete an entry, the dialog appears but the sticky ...