Suppose I receive a string containing special characters that needs to be transformed using filter/pipe, with the additional requirement of capitalizing the first letter of each word.
For instance, transforming "@!₪ test stri&!ng₪" into "Test String".
Is there a way to accomplish this task?
If you want to use a pipe, you can do it like this:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'customPipe'
})
export class customPipe implements PipeTransform {
transform(value: string): string {
let newValue = value.replace(/[^\w\s]/gi, '');
return newValue.charAt(1).toUpperCase() + newValue.slice(2);
}
}
To remove non-alphabetic characters and capitalize the first letter of each word, you can utilize a regular expression in conjunction with the replace method within your pipe.
Start by using:
str = str.replace(/[^\w\s]/gi, "")
This code snippet will eliminate all non-alphabet characters from the string.
Next, you can apply:
str = str.replace(/\b\w/g, (str) => str.toUpperCase())
This piece of code will convert any lowercase initial character next to a word boundary (like a space) into uppercase.
You can combine these steps like this:
let str = "@!₪ test stri&!ng₪";
str = str.replace(/[^\w\s]/gi, "") // Remove non-word characters
.trim() // Eliminate leading and trailing spaces
.replace(/\b\w/g, (s) => s.toUpperCase()) // Capitalize the first letter of each word
console.log(str);One helpful resource to use is the website: Regex101
To illustrate how it works: Let's say you need to split or remove a custom string like '@!₪ test stri&!ng₪' Simply input the string in the Test String field
In my current situation, I am facing an issue where data sent from a component to a service for manipulation is not triggering the desired behavior. The intention was to update a BehaviorSubject variable in the service by using the next method when fetchin ...
I am faced with a situation where I have elements in my HTML that are dynamically populated with text from an API. My goal is to check if all these elements have a value and then trigger a function accordingly. The current code I have only allows me to obs ...
Lately, I've delved into utilizing NVD3's impressive angular directives for crafting D3 charts. They certainly have a sleek design. However, I'm encountering numerous challenges with callbacks. While callbacks function smoothly when incorpor ...
This particular inquiry mirrors 92% chunk asset optimization - webpack. However, a satisfactory solution has yet to be found. Typically, I utilize ng serve or nmp start to initiate my service locally and it functions correctly. However, on an EC2 instance ...
Hey there, I recently finished my first React Project and I’m wondering if there’s a way to hide the 'side-menu' section on mobile screens using CSS. Any suggestions? <div className='side-menu'> <SiderComponent /> < ...
Looking to enhance my web app with a mixin that shows a list of entries, each with a time stamp indicating how long ago it was posted. mixin listTitles(titles) each title in titles article.leaf article a.headline(href=title.URL)= title.t ...
I'm currently working on implementing pagination logic that automatically updates the page numbers when the last index is clicked. For example: 1 2 3 4 5 If a user clicks on the number 5, it should display: 2 3 4 5 6 and so forth... I have succe ...
I am facing an issue on my website where, on the index page, clicking a button changes the background color to black. However, this change is not reflected on other pages even though I have linked the JavaScript file to all HTML documents. How can I make i ...
I'm currently exploring the world of Vue JS and I thought it would be interesting to experiment with something new. Sometimes looking at the code first makes understanding it much easier than a lengthy explanation. Check out this code snippet on jsFi ...
Is it possible to add a line between the last row (Swimsuit) and the footer line (Total)? If so, how can I achieve this using Angular 15? https://i.stack.imgur.com/581Nf.png ...
Is there a way to retrieve JSON data using the POST method in Ajax? I attempted to use the code below but encountered an error: TypeError: Illegal invocation By following the link above, I was able to access JSON-formatted data. However, please note th ...
I am working on a component that takes in data through the @Input() decorator regarding a group. My objective is to generate a new array of objects during the initialization of the component based on the data from the group array. Below is the TypeScript c ...
Running ng test on my Angular 8 project with Angular material components is resulting in multiple failures. The issue seems to be related to missing test cases for these scenarios. DeleteBotModalComponent > should create Failed: Template parse errors: & ...
Currently, I am in the process of setting up a monorepo workspace that will house a Vue 3 application (using vite and TypeScript), cloud functions, and a shared library containing functions and TypeScript interfaces. I have successfully imported my local ...
I'm currently working on implementing a dropdown navigation menu for touch devices utilizing jQuery. I have managed to successfully hide dropdowns when tapping on the menu item title or outside the navigation area. However, I am facing an issue where ...
I'm trying to find a way to generate an invite link for users to keep track of invites. The code I have currently is creating the invite for the Bot instead. const channel = client.channels.cache.find(channel => channel.id === config.server.channel ...
I have configured my lazy loaded Home module to have an empty path. However, the issue I am facing is that whenever I try to load different modules such as login using its URL like /new/auth, the home module also gets loaded along with it. const routes: R ...
My first attempt at utilizing connection pooling is with Node.js. I crafted a database connection module in Node.js to establish a single connection, which is then referenced within a pooling function for later use when passed to different modules. /* D ...
I've recently delved into Typescript and encountered a roadblock. While I successfully tackled the issue in JavaScript, transitioning to Typescript has left me feeling lost. My dilemma revolves around fetching data from an API and populating a table u ...
I recently started learning react and encountered an error while passing a boolean value as a prop to a component. The complete error message is: Type '{ hasInputs: boolean; bg: string; }' is not assignable to type 'IntrinsicAttributes & ...