Change every occurrence of multiple forward slashes to only two forward slashes

Currently, I am working with Angular 2 using TypeScript. I have an input box in HTML that allows users to enter search terms, including REST resources like employee/getDetail.

I need to replace / with // to prevent my service from failing. Additionally, even if a user enters something like employee///////getDetail//////salary, it should translate to employee/getDetail/salary.

My idea is to replace multiple slashes with just two slashes. So, if a user enters more than 2 slashes, we will only keep 2.

Is there a way to escape these characters within the Angular UI itself?

Thank you, Ashish

javascriptregexangulartypescript

Answer №1

Substitute the pattern /{2,} with a single forward slash. This change eliminates redundancy without impacting cases where only one forward slash was (correctly) used.

var data = "employee///////getDetail//////salary";
console.log(data.replace(/\/{2,}/g, "/"));

If you specifically desire two forward slashes in the replacement, then utilize this method:

data.replace(/\/+/g, "//")

Answer №2

To match a forward slash, you can create a regular expression and then utilize the String.prototype.replace method to substitute one or more forward slashes with two forward slashes as demonstrated in the code snippet below.

var forwardSlash = /\/+/g;
var input = "employee///////getDetail//////salary";
console.log(input.replace(forwardSlash, "//"));

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

Sending information from an AngularJS selected item to an edit form

Currently, I am working on an add/edit form using angularJS. Within this project, there are two templates - one for displaying a list of items and another for the form itself. While adding new items works smoothly, I have encountered some challenges when i ...

javascriptangularjsangularjs-scopeangular-ngmodel

Adjust the CSS property of a div to have a fixed position when scrolling

I attempted to implement a fixed div on scroll in Vue.js using the following code: ... async created() { window.addEventListener('scroll', this.calendarScroll); } methods: { calendarScroll() { console.log('Scroll'); cons ...

javascriptvue.jsvuejs2

Upgrade scenes in ThreeJS by implementing cross fading between scenes from version 101 to 107

Discovering a helpful example by Fernando Serrano on how to smoothly transition between 2 scenes in ThreeJS was quite enlightening. I also stumbled upon this modified JSFiddle version using ThreeJS 101, which works well but faced an issue... Following the ...

javascriptthree.js

Unlocking the secrets of achieving full-screen printing with jspdf and html2canvas

Check out the DEMO here Hey! I'm currently working with Angular8 in my project. I've integrated jspdf and html2canvas to convert HTML to PDF. However, I'm facing an issue where only half of the page is being printed instead of the full page ...

angularjspdfhtml2canvas

Tips for managing a fixed-positioned element during scrolling and zooming events

I have a situation where I need a fixed-position element to stay at the top-right corner of the viewport. Here is the HTML code: <div class = "header"> <p>This heading has an absolute position</p> </div> And here is the CSS: .he ...

javascriptjqueryhtmlcss

Using Javascript/HTML to enable file uploads in Rails

I'm currently facing an issue with uploading and parsing a file in Rails, as well as displaying the file content in a sortable table. I followed a tutorial on to get started. This is what my index.html.erb View file looks like: <%= form_tag impo ...

javascriptjqueryhtmlcssruby-on-rails

What is the proper way to access the current value of a computed property from within its own computation method?

Our goal is to activate a query when a string reaches a length of 3 characters or more, and keep it activated once triggered. Leveraging the Vue 2 Composition API, we have implemented a reactive object to manage the status of queries: import { computed, de ...

typescriptvue.jsvuejs2vuejs3vue-composition-api

Stylus remains undefined even after a successful npm installation

I've been following a tutorial to learn more about node.js, but I keep encountering a strange error. After running npm install stylus, I receive the following output: npm http GET https://registry.npmjs.org/stylus npm http 304 https://registry.npmjs. ...

javascriptnode.jsstylus

What is the best way to showcase the information from this API on an HTML page using Vanilla JavaScript?

I am currently working on implementing an AJAX call to fetch data from a movie API online. Below is the HTML code I have written for this: <html> <head> <meta charset=utf-8> <title>Movie Database</title> ...

javascripthtmljsonajax

Issue with parallax scroll feature on Mobile Safari not functioning as expected

I created a JavaScript code for parallax scrolling on an image at the top of a webpage. The code functions perfectly on Chrome, Firefox, Internet Explorer, Opera, and Safari on desktop. However, when I tested it on Safari on my iPad, the parallax effect wa ...

javascriptjqueryioscssmobile-safari

An issue has occurred in AngularJS where the error message "ng areq not

I'm facing an issue with my meta controller, as I am trying to alter the meta tags dynamically. When checking the console, I encounter the error message error ng areq not a function. I have looked on StackOverflow for similar issues but couldn't ...

javascriptangularjsmetadata

Event for terminating a Cordova application

We are looking for a way to send a notification to the user's device when our app is closed rather than just paused. On iOS, this occurs when you double click the home button and swipe up on the app, while on Android it happens when you press the Men ...

javascriptandroidioscordovaionic2

Error TS2322: This type cannot be assigned to type 'never' in Angular

Trying to incorporate the websocket (sockjs and stomp) into my Angular project for a chat messaging feature, I encountered an issue in my service.ts file. Specifically, when I defined the addMessage method like so: public messages = []; addMessage(messa ...

angular

The provider of $modalInstance is currently unknown, leading to an error in the MainController

I'm currently facing an issue with my app's modals when trying to call them using $modalInstance. Despite following the advice from other similar questions I found, such as avoiding the use of ng-controller, my modal still isn't functioning ...

javascriptangularjsangular-ui

Implement the morgan express middleware from exports

For my logging needs in an Express application, I have decided to utilize the morgan package. Initially, I was able to integrate morgan by using it directly in my server.js file like so: app.use(morgan('tiny')), which worked perfectly. However, I ...

javascriptnode.jsexpressmorgan

Meteor: Transmitting Session data from the client to the server

Below is the code snippet I am utilizing on the client side to establish the Session variable: Template.download.events({ 'click button': function() { var clientid=Random.id(); UserSession.set("songsearcher", clientid); ...

javascriptnode.jssessionmeteor

Default item dropped using jQuery UI Droppable, no changes to markup structure

Currently, I am utilizing the .draggable() and .droppable() functions to calculate the price of items that are dropped into a container. The calculation is based on the weight of the items and a predetermined price per gram. Now, I am looking to have one ...

javascriptjqueryjquery-uijquery-ui-draggablejquery-ui-droppable

Maximum character count for text input in node.js/express

I am trying to save a base64-encoded image string in my Postgres database using node.js/express. However, I am facing an issue with fetching the string. Is there a limitation on the size of data that can be stored? Before making an AJAX call from the fron ...

javascriptnode.jsexpressbase64

Ways to modify the screen when a click event occurs

To make the display block when clicking this icon: <div class="index-navi-frame-box"> <p onclick="expandFunction()"> <i class="fa fa-bars"></i> </p> </div> Here is what it should change to: <div class=" ...

javascripthtmlcss

The action of JQuery is modifying the value of the checkbox, but it is not visually showing as checked

I am working on a list that contains checkboxes and text, similar to an email inbox. My goal is to be able to check or uncheck the checkbox anytime I click anywhere on the list item (row). To achieve this functionality, I have used the following code withi ...

javascriptjqueryhtmlcheckbox