Incrementally Increasing Array Elements with Javascript's Splice Method

Question

Incrementally Increasing Array Elements with Javascript's Splice Method

I'm attempting to insert "-" before capital letters in a string. For example, transforming helloWorld into hello-world.

Despite my efforts, the dashes are being placed incorrectly within the output array. For instance, changing thisIsSpinalTap to this-I-sSpin-alTap

What could be causing this issue with my code?


function spinalCase(str){
    str = str.replace(/ /g,'-');
    strArr = str.split("");
    
    for(i=1;i<str.length;i++){
        if(str.charAt(i)==str.charAt(i).toUpperCase()&&str.charAt(i)!=="-"){
            console.log(i);
            strArr.splice(i,0,"-");
        }
    } 
    return strArr.join("");
}

spinalCase('thisIsSpinalTap'); // should give this-I-sSpin-alTap

javascript arrays

Answer 1

Answer №1

The issue lies in the fact that every time a splice is performed, strArr shifts to the left; therefore, it is advisable to maintain an additional counter starting at 0 and incrementing each time a splice is executed, like so:

var k = 0;
// ...
    strArr.splice(i + k, 0, '-');
    ++k;

If you are not simply practicing, there is a simpler method available:

var s = 'thisIsSpinalTap';

var res = s.replace(/([a-z])([A-Z])/g, '$1-$2'); // "this-Is-Spinal-Tap"

This expression identifies a lowercase letter followed by an uppercase letter and substitutes it with a dash in between.

Answer 2

The issue lies in the fact that every time a splice is performed, strArr shifts to the left; therefore, it is advisable to maintain an additional counter starting at 0 and incrementing each time a splice is executed, like so:

var k = 0;
// ...
    strArr.splice(i + k, 0, '-');
    ++k;

If you are not simply practicing, there is a simpler method available:

var s = 'thisIsSpinalTap';

var res = s.replace(/([a-z])([A-Z])/g, '$1-$2'); // "this-Is-Spinal-Tap"

This expression identifies a lowercase letter followed by an uppercase letter and substitutes it with a dash in between.

Answer 3

Answer №2

One issue arises when modifying the array within a loop while checking characters using a string that does not reflect the updates made to the array due to new character insertions. As a result, when a - is inserted, the indexes in the string lag behind those of the array by 1 position, leading to incorrect placements of -. This pattern persists with each insertion, causing the third insertion to occur at position-2.

function spinalCase(str) {
  str = str.replace(/ /g, '-');
  var strArr = str.split(""),
    i, code;
  for (i = 1; i < str.length; i++) {
    //since we are modifying the array the indexes in the original array can't be used
    code = strArr[i].charCodeAt(0);
    if (code >= 65 && code <= 90) {
      strArr.splice(i, 0, "-");
      //since we are inserting a new element before current element we need to skip an extra element
      i++;
    }
  }
  return strArr.join("");
}

var result = spinalCase('thisIsSpinalTap');
snippet.log(result)

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

Answer 4

One issue arises when modifying the array within a loop while checking characters using a string that does not reflect the updates made to the array due to new character insertions. As a result, when a - is inserted, the indexes in the string lag behind those of the array by 1 position, leading to incorrect placements of -. This pattern persists with each insertion, causing the third insertion to occur at position-2.

function spinalCase(str) {
  str = str.replace(/ /g, '-');
  var strArr = str.split(""),
    i, code;
  for (i = 1; i < str.length; i++) {
    //since we are modifying the array the indexes in the original array can't be used
    code = strArr[i].charCodeAt(0);
    if (code >= 65 && code <= 90) {
      strArr.splice(i, 0, "-");
      //since we are inserting a new element before current element we need to skip an extra element
      i++;
    }
  }
  return strArr.join("");
}

var result = spinalCase('thisIsSpinalTap');
snippet.log(result)

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

Incrementally Increasing Array Elements with Javascript's Splice Method

Answer №1

Answer №2

Similar questions

Verify if the nested JSON object includes a specific key

The jQuery window.on event is not functioning when trying to handle the same hash change

What is the method for implementing absolute paths rather than relative paths in a React or Next.js project?

Creating a dynamic image collage with scrolling bubbles: A step-by-step guide

React JS component experiencing issues with Material UI modal functionality

Is it a beneficial strategy to remove object keys and assign new keys when iterating through thousands of objects in a loop?

What is the best way to input two distinct variables into the Firebase database?

JQuery is not recognized by Ajax components

Utilizing Firebase authentication and next-auth in Next.js - Authentication currently returns null

"Using Three.js GLTF, switch the material of one object to match the material of

Just updated to Angular 10, encountered issue: Unable to modify the read-only property 'listName' of an object

What is causing my function to not wait for the resolution of the Promise?

display the values of the array object within the ajax success callback

Why does the arrow function get executed right away once it is wrapped?

[ERROR_HTTP_HEADERS_ALREADY_SENT]: Headers can't be set once they have been sent to the client, expressjs

Changing an array of character pointers to lowercase in the C programming language

Explain the process of data binding with DOM elements

Having trouble configuring the sticky-footer correctly

How can I combine multiple styles using Material-UI themes in TypeScript?

Tips for displaying "No Results" without causing any lag in the browser