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
import { Injectable } from '@angular/core'; import { Http, Response, Headers, RequestOptions } from '@angular/http'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/catch'; // import 'rx ...
Upon retrieving a rating (which can be more than 5) from the database, I aim to dynamically generate glyphicon stars based on the received value when the page loads. The code snippet below demonstrates how the value is retrieved: int rating_count = DBinte ...
I am looking to use the "selected" attribute in the option element based on the name attribute using JavaScript or jQuery. Essentially, I want the option with name="1" to be automatically selected when the page loads. I have attempted the following code, b ...
In my current code implementation, I have a hard coded [0] value that is used in rendering data for a table. However, instead of rendering only the first row as expected, it is displaying all rows. I am confused as to why this is resulting in rendering al ...
I am currently working on a function that subscribes to a search api. Within the map function, my goal is to transform items into objects. I haven't encountered any errors in my code, but the response always turns out empty. Here's the snippet o ...
Currently, my jQuery script outputs the result in the same div for error or success messages: HTML <div id="error-message").html(res); JQUERY jQuery('#register-me').on('click',function(){ $("#myform").hide(); jQuery ...
Imagine you have an array stored as a string in session storage, and you need to retrieve it, add an element, and then save it back. trackNavHistory = (path: String) => { let historyArr : Array<String> = sessionStorage.getItem("navHistory ...
When attempting to display a list of images from the user's camera roll, I utilized expo-media-library to fetch assets using MediaLibrary.getAssetsAsync(). Initially, I aimed to showcase a list of filenames as the datasource for the images. Below is m ...
We are receiving information from the backend server and need to transfer it to an iframe. In order to accurately set the height of the iframe to match the content, we must wait for the content to be loaded into the iframe. However, this process may not ha ...
Is it possible to efficiently handle 401 errors in AJAX calls and redirect to login.html without repeating the same code over and over again? if (xhr.status === 401) { location.assign('/login.html'); } I am seeking a way to manage these erro ...
I'm having an issue with the code in my app. It seems that the content-type is not being sent. Is there a way to force it to be sent? $.ajax({ crossDomain: true, type: ...
I have developed a unique custom directive which is defined as: <div class="col-md-6"> {{templateMapping[colProp].SheetPointer}} <select class="form-control" ng-model="selectedColumn" ng-change="changeMapping()" ng ...
As a front-end designer/developer with limited MVC experience, I am looking to create a login form using TowerJS. Following the documentation, my app includes a model named "User": class App.User extends Tower.Model @field "email", type: "String" @fie ...
Despite multiple discussions on stackoverflow, a solution to disabling browser AUTO-FILL suggestions on fields still eludes me. Does anyone know of a reliable method to prevent these pop-ups from appearing? <mat-form-field> <input ...
When I utilize require(./filename), I am able to include and run the code within filename without any explicit export being defined inside filename. In ES6, what is the equivalent of this using import ? Appreciate it ...
Is it possible to configure a select2 control to automatically select an item when the ajax response contains extra data? I am looking to set up my controller to mark an item as an exact match in the JsonResult and have the select2 control automatically s ...
I have a table where I am utilizing sumtr for the table footer, and displaying all the information within datatables. My requirement is to show all the values as currency. However, I am unable to modify the values after sumtr because it won't be able ...
I currently have the following data: let str = "1,2,3,4" My goal is to convert it into an array like this: arr = [1,2,3,4] ...
I am faced with a data transformation challenge involving extracting information from user input in Apache Superset using metrics. The data is assigned to the variable dataTransformation. {country: "Afghanistan", region: "South Asia", y ...
In my current Angular JS project, I am working on implementing an interceptor to handle a specific response and redirect the user to another page. This is the code for my custom interceptor: App.factory('InterceptorService', ['$q', &ap ...