``How can I extract the last string in Vue.js when working with string processing?

I've been working with strings in vuejs and currently have 4 URL strings:

https://web-sand.com/product/slug/apple-iphone-13
https://web-sand.com/product/slug/samsung-galaxy
https://web-sand.com/product/slug/xiaomi-red
https://web-sand.com/product/slug/apple-ipad

My goal is to process these strings to extract the final string. Since the length of my strings varies, using fixed methods is not efficient. The desired result is :

apple-iphone-13
samsung-galaxy
xiaomi-red
apple-ipad

If anyone has any comments or suggestions, I would greatly appreciate it. Thank you.

Answer №1

To retrieve the last part of a string, you can utilize the following JavaScript function:

function getLastPartOfString(str) {
   return str.split('/').pop();
}

Answer №2

Take a look at this code:

input.split("\n").map(line => line.split("/").pop())

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

Icons in Semantic-UI: Facing Difficulty in Accessing ("CORS Request Not HTTP"

Here's an example I'm working on: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Understanding - Main</title> <link rel="stylesheet" type="text/css" href="../semantic/dist/semanti ...

When the mouse hovers over it, show text instead of an icon on a React Material UI button

I'm currently working on a project that involves using material ui buttons. Initially, the add button only displays the + icon. Now, I want to change the button content from the icon to the text "CREATE ITEM" when the mouse is hovered over it. Check ...

Is there a way to refresh angular bindings using data retrieved from a getUserMedia stream?

I'm currently using getUserMedia to capture an audio stream. The audio stream is only accessible within the getUserMedia callback function. However, I have encountered an issue where Angular fails to detect changes and update the bindings when I attem ...

The delete function is not functioning

I need help with implementing a custom Angular directive that includes a delete button to remove itself. When I click the button removeMe, it is not deleting an item from the array. Any suggestions on what might be causing this issue? HTML: <button t ...

Display information from a selected card on a separate page upon clicking

I am currently working with a JSON file to display cards on a webpage. The code is sourced from a file named paintings.js and the cards are rendering correctly. However, when I click on a card, it redirects me to a blank paintingInfo.js page. I'm wond ...

Updating the image source attribute using Vue.js with TypeScript

Let's discuss an issue with the img tag: <img @error="replaceByDefaultImage" :src="urls.photos_base_url_small.jpg'"/> The replaceByDefaultImage function is defined as follows: replaceByDefaultImage(e: HTMLImageElement) ...

Select a different radio button to overwrite the currently checked one

I am facing a situation where I have two radio buttons. The default checked state is one of them, but I want to change that and make the other one checked by default instead. Here is the HTML code: <div class="gui-radio"> <input type="radio" v ...

Enhance your slideshow with a stylish fade effect

I found this slideshow on codepen and decided to customize it to make it my own. While everything is working well, I wanted to incorporate a fade effect into the transition between slides. I'm unsure whether I should add something to the CSS file or m ...

Uncertain regarding Vuex modules

Let me break this down for you in a clear manner: I'm currently using a Vue component named World.vue: <template> <v-container> This represents the entire world <v-btn @click="test()" /> </v-container> &l ...

Issue with React.js button functionality not functioning as expected

import React, { Component } from 'react'; import './App.css'; class App extends Component { constructor(props) { super(props); this.state = { items: [] } } addItem(e) { var itemArray = this.state.items; ...

Issue with vue-apollo package causing GraphQL query not to display on the frontend

Currently, I am expanding my knowledge of GraphQL and working on a project where I aim to display queries in the front end. To achieve this, I have incorporated the package GitHub - Akryum/vue-apollo: ...

Is there a way for me to extract a smaller segment from an ID label?

I am working on a web development project and I have a set of buttons within a specific section. Each button has an id in the format of #balls-left-n, where n ranges from 1 to 15. My goal is that when a user clicks on one of these buttons, I want to extra ...

Determine if the object's value is present

My current JavaScript setup looks like this: var NAMES = []; function INFO(id,first,middle,last){ var newMap = {}; newMap[id] = [first, middle, last]; return newMap ; } Next, I have the following code block: for (var j = 0; j < NUMBER.leng ...

Exploring the power of Next JS by implementing server-side rendering with a

I am faced with the challenge of incorporating navigation into my layout by utilizing data from an API and then displaying it on specific pages. The catch is that the Layout file is not located in the pages folder, meaning I cannot use traditional getStati ...

What is the best way to switch between three different menus and ensure that the last selected menu remains open when navigating to a new page

My knowledge of javascript, jquery, and php is pretty much non-existent, unfortunately. I only have a grasp on html and css at the moment. However, I will be starting school to learn these languages in the fall! The issue I am currently facing is creating ...

Submitting the Ajax form will result in the quantity of the product in the cart being updated while remaining on

Hello, I am using ajax to keep the user on the same page after submitting a form. If successful, I will use ajax load to load another page that displays the quantity of the product. However, I am facing an issue where each subsequent submit increases the q ...

Exploring React and finding the way to a specific item

I have a list of users displayed in a table. When a user clicks on a row, I want to navigate to a different component to show the details. <tbody> {this.state.clients.map(client => ( <tr className="tableRow" onClick={() => this. ...

Trouble arises when adding HTML elements to a Content Editable Div. Any text inputted after programmatically inserting HTML content will merge with the last HTML tag instead

https://i.sstatic.net/bKIVm.pngI am currently working on a project that involves creating message templates within an app. Users have the ability to add placeholders for fields like names to these templates by clicking a button. They can also remove these ...

Navigating to new location following the final iteration in a loop of asynchronous updates in MongoDB

Currently, I am developing an application using Node/Express/Mongodb/Mongoskin. I am facing an issue with the code responsible for updating a collection of documents: db.collection('invoices').find().toArray(function(err, dbDocs) { if (err) t ...

Unable to set up service worker with Workbox window

I need help migrating from v3 to v4 in my Vue.js app. I am using workbox-window (CDN) and workbox-webpack-plugin for this task. While everything works fine locally with an http-server, I encounter an error after deployment that prevents the service worker ...