Tips for removing characters from a string and determining the number of characters that are left

I am working with a string that I want to slice 22 characters from the beginning and then determine the count of remaining characters.

For example - Red, Blue, ABC, Test1, REN, Green, Test, Red - Total 37 characters

Desired Output:

Red, Blue, ABC, Test1, REN --------------- 15

Out of a total of 37 characters, 22 have been sliced and there are 15 characters remaining in the string.

Here is my code snippet:

viewMore(text) {
    if (text.values) {
      const enumText = text.values[0];
      return enumText.slice(0, 22) + (enumText.length > 22 ? enumText.length : "");
    }   
  }

Please Find Attached https://i.sstatic.net/nORQP.png

javascriptangulartypescriptangular8

Answer №1

To find the difference between the length of the original text and the sliced text, simply subtract the sliced text length from the original text length.

viewMore(content) {
    if (content.items) {
      const selectedText = content.items[0];
      this.displayContent = selectedText.slice(0, 22) + (selectedText.length > 22 ? "------<strong>("+(selectedText.length - selectedText.slice(0, 22).length)+")</strong>" : "");;
    }   
  }

HTML:

<div class="display" [innerHtml]="displayContent"></div>

Answer №2

let inputString = "Yellow,Orange,MNO,Testing2,GRE,Purple,Exam,Yellow";
const textArray = inputString.split('');
if(textArray.length > 24) {
    let extraChars = textArray.length - 24;
    console.log(inputString.substring(0, 24) + ' ---- ' + extraChars);
} else {
    console.log("");
}

Answer №3

Give this a try:

If you only need to extract 22 characters, you can use the following code snippet. While I haven't replicated your exact data type, you can make the necessary adjustments to achieve the desired outcome.

var colors = 'Red,Blue,ABC,Test1,REN,Green,Test,Red';
console.log(colors.slice(0,22) + '-------------' + (colors.length - 22))

Answer №4

//[using ES6] --

sampleString = "Yellow,Orange,XYZ,Test2,NNE,Purple,Sample,Yellow";
cutOffIndex = 24;
 `${sampleString.slice(0,cutOffIndex)}----------${sampleString.length-cutOffIndex}`;
// This code snippet could be useful

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

Evaluating the functionality of Express Js Server with mocha and chai

I'm currently struggling to properly close the server connection in my Express server when testing it with Mocha and Chai. It seems that even after the test is completed, the server connection remains open and hangs. Index.js const express = require( ...

javascriptnode.jsexpressmocha.jschai

Checkmate with React Native's Checkbox Component

I have implemented the React Native Elements CheckBox inside List Items within a Flat List. import React, { Component } from "react"; import { View, Text, StyleSheet, FlatList } from "react-native"; import axios from 'axios&apo ...

javascriptreactjsreact-native

A straightforward Node.js function utilizing the `this` keyword

When running the code below in a Chrome window function test(){ console.log("function is " + this.test); } test(); The function test is added to the window object and displays as function is function test(){ console.log("function is " + this.tes ...

javascriptnode.jsv8

Pressing the submit button will not successfully forward the form

I've encountered an issue with my submit buttons - when I click on them, nothing happens. They were functioning properly before, but now they seem to be unresponsive. What could be causing this problem? <form id="contact" name="updateorder" acti ...

javascriptphphtmlformssubmit-button

Customizing the "Actions" Dropdown in APEX Interactive Grid

Is there a way to modify the choices available in the Selection section of a Row Actions Menu in Apex? I managed to alter the options in the Line Menu, but I'm facing challenges when trying to make changes in the Selection Menu. The Selection Menu i ...

javascriptoracle-apexoracle-apex-5

Conceal when clicking away from specified angular 4 element

I have developed a vertical navigation menu with a side menu that toggles open and closed on click. The issue I am facing is that I need to close the side menu when clicking anywhere outside of it. To address this, I attempted to use a solution from this G ...

angularangular2-directives

Tips for sending data from Jade to a Node.js endpoint function

I am unfamiliar with Express and I am trying to figure out how to pass the user's username from a Jade file to an endpoint function in my JavaScript file. Below is the code for the endpoint function in index.js: router.get('/userdetail', fu ...

javascriptangularjsnode.jsexpresspug

Determine the presence of a value within a specific column of an HTML table using jquery

When I input an ID number into a textbox, it shows me the corresponding location on a scale in another textbox. You can see an example of this functionality in action on this jsFiddle: http://jsfiddle.net/JoaoFelipePego/SdBBy/310/ If I enter a User ID num ...

javascriptjqueryhtml

The parameter cannot be assigned to type 'HTMLCanvasElement | null' due to conflicting arguments

I am encountering an issue with the following code, as it fails to compile: import React, {useEffect} from 'react' import {Card, Image} from 'semantic-ui-react' import * as chart from 'chart.js' export const PieChartCard = ...

reactjstypescriptreact-typescript

Communication through Collaboration Diagrams

For my software engineering project, I am working on creating communication diagrams. However, I am struggling with understanding how to draw if-then statements. Can anyone provide assistance with this? I have tried looking on YouTube for tutorials, but u ...

javascriptumlsoftware-designdiagramcollaboration-diagram

Send data from HTML forms to PHP without needing to reload the page

I’m currently developing a website that showcases data retrieved from a database using PHP. The site includes checkboxes within a form, and based on the user's selections, I want the data displayed in a certain div to refresh when they click ‘appl ...

javascriptphpjqueryajaxforms

Using Vue.js to pass a variable from a parent component to a child component

Parent component: ShowComment Child component: EditComment I'm attempting to pass the value stored in this.CommentRecID to the child component. In the template of ShowComment, I have included: <EditComment CommentRecID="this.CommentRecID" v-if= ...

javascriptjqueryvue.jsvue-props

Async await expressions route hung

I have been in the process of transitioning my application to utilize async/await instead of callbacks for query requests on the backend. Progress has been smooth so far, but I have encountered a problem. When trying to fetch a get route, my page is hangin ...

javascriptnode.jsexpressasynchronousasync-await

I have an array in JavaScript containing data objects within curly braces, and I want to disregard it

In trying to sum all values for each key in an array and create a new array with the key-total pairs, encountering difficulties when dealing with empty data represented by {}. To address this issue, attempting to validate that the data is not equal to {} b ...

javascriptnode.js

Trouble with displaying a cube from Blender to Three.js

Hey everyone, I'm having some trouble exporting a cube from Blender to three.js. I've exported the JSON file, but when I try to display the cube in my code, it's not showing up - instead, all I see is the setColor screen and I can't fig ...

javascriptjsonthree.jsblender

Manage numerous canvas animations

Is there a way to interact with an already drawn Canvas animation? I am attempting to create 3 distinct tracks that can be controlled by a "Start" and "Stop" button. However, when I click the Start button on the first canvas, it triggers the last canvas in ...

javascripthtmlcanvas

Is the delete functionality in the $resource not performing as anticipated?

After creating a basic Angular application that consumes an API made with Laravel, I have encountered an issue. The login process sets a token in a cookie, but the success method is not triggering after sending a DELETE request to log out. The system has ...

javascriptajaxangularjscookiesangular-resource

Retrieve a specific item from a JSON response using Node.js

When I receive a message from a WebSocket, the code snippet is triggered like this: ws.onmessage = (e) => { debugger if (e.data.startsWith('MESSAGE')) alert(JSON.stringify(e.data)) ImageReceived(e.data) c ...

javascriptnode.jsjsonwebsocket

Issues with PrimeNG listbox functionality in Angular 2

In my reactive form, there are two controls. One control is a dropdown for selecting a country, and the other control is a list of checkboxes for selecting cities within the chosen country. The issue arises when I use primeNg's listbox for the city se ...

angulartypescriptprimeng

The functionality for navigating the Angular uib-dropdown using the keyboard is currently experiencing issues

I am currently utilizing Angular Bootstrap 2.2.0 in conjunction with Angular 1.5. Despite enabling the keyboard-nav option, I am experiencing issues with keyboard navigation on UIB dropdowns. Below is the snippet of my code: <div class="btn-group" ...

javascriptangularjstwitter-bootstrapangular-bootstrap