Use the array.reduce method to split a string into an array based on specific conditions

Question

Use the array.reduce method to split a string into an array based on specific conditions

I need assistance dividing a string into an array with a maximum of 15 characters per item using the array.reduce method. Any guidance on how to achieve this would be greatly appreciated.

Starting with this example:

const str = 'Lorem ipsum dolor sit amet consectetur adipiscing elit'

The desired outcome should be:

const result = ['Lorem ipsum', 'dolor sit amet', 'consectetur', 'adipiscing elit']

javascript arrays

Answer 1

Answer №1

In each iteration of the reduce function, concatenate the current word with the last sentence and compare the length to a maximum value. If it exceeds the limit, add the new sentence. Otherwise, replace the last sentence with the concatenated one.

const str = 'Lorem ipsum dolor sit amet consectetur adipiscing elit'

const res = str.split(' ').reduce((acc, word) => {
  const lastSentence = acc.pop()
  const currentConcatnated = [lastSentence, word].filter(Boolean).join(' ')
  
  if (currentConcatnated.length > 15) {
    acc.push(lastSentence)
    acc.push(word)
  } else {
    acc.push(currentConcatnated)
  }
  
  return acc
}, [])

console.log(res)

Answer 2

In each iteration of the reduce function, concatenate the current word with the last sentence and compare the length to a maximum value. If it exceeds the limit, add the new sentence. Otherwise, replace the last sentence with the concatenated one.

const str = 'Lorem ipsum dolor sit amet consectetur adipiscing elit'

const res = str.split(' ').reduce((acc, word) => {
  const lastSentence = acc.pop()
  const currentConcatnated = [lastSentence, word].filter(Boolean).join(' ')
  
  if (currentConcatnated.length > 15) {
    acc.push(lastSentence)
    acc.push(word)
  } else {
    acc.push(currentConcatnated)
  }
  
  return acc
}, [])

console.log(res)

Answer 3

Answer №2

Here is a more user-friendly method that incorporates the use of Array.prototype.reduce(). This approach ensures that the last element of acc is not accessed if it is empty by confirming lastIndex >= 0 to guarantee it is not the initial iteration.

const text = 'Lorem ipsum dolor sit amet consectetur adipiscing elit';
const finalResult = text.split(' ').reduce((acc, current) => {
  const lastIndex = acc.length - 1;
  const value = ' ' + current;

  if (lastIndex >= 0 && acc[lastIndex].length + value.length <= 15) {
    acc[lastIndex] += value;
  } else {
    acc.push(current);
  }

  return acc;
}, []);

console.log(finalResult);

Answer 4

Here is a more user-friendly method that incorporates the use of Array.prototype.reduce(). This approach ensures that the last element of acc is not accessed if it is empty by confirming lastIndex >= 0 to guarantee it is not the initial iteration.

const text = 'Lorem ipsum dolor sit amet consectetur adipiscing elit';
const finalResult = text.split(' ').reduce((acc, current) => {
  const lastIndex = acc.length - 1;
  const value = ' ' + current;

  if (lastIndex >= 0 && acc[lastIndex].length + value.length <= 15) {
    acc[lastIndex] += value;
  } else {
    acc.push(current);
  }

  return acc;
}, []);

console.log(finalResult);

Answer 5

Answer №3

This code demonstrates a different approach using Array#reduce, highlighting unique techniques.

The use of the nullish coalescing operator ?? for added safety.
Array#concat is employed to prevent array mutation. While not necessary here, it's a useful trick for scenarios where mutations are undesired.

const str = 'Lorem ipsum dolor sit amet consectetur adipiscing elit';

const result = str.split(/\s+/); //split on any amount of whitespace
  .reduce((acc, word) => {
    const last = acc[acc.length - 1] ?? "";
    
    const newLast = `${last} ${word}`.trim();
    
    if (newLast.length > 15)
      return acc.concat(word);
    
    return acc.slice(0, -1)
      .concat(newLast);
  }, []);
  
console.log(result);

An alternative implementation can be achieved using only regular expressions:

/(?<=^|\s)\b.{1,15}\b(?=\s|$)/g

This regex matches up to 15 characters as long as they form complete words, avoiding partial matches within words or surrounding white spaces.

const regex = /(?<=^|\s)\b.{1,15}\b(?=\s|$)/g;

const str = 'Lorem ipsum dolor sit amet consectetur adipiscing elit';

const result = [...str.matchAll(regex)].flat();

console.log(result);

Check it out on Regex101

Here are a few examples illustrating how this method works:

Lorem ipsum dolor sit amet consectetur adipiscing elit
^         ^^  ^
|_________||  |
    11     |  |
           |  |
           |  + -> 15th character, but match cannot end due to next non-whitespace symbol 
           + -> whitespace prevents match from ending here

Lorem ipsum dolor sit amet consectetur adipiscing elit
           ^^            ^
           ||____________|
           |      14
           |
           + -> Match cannot start on whitespace and must be preceded by whitespace

Answer 6

This code demonstrates a different approach using Array#reduce, highlighting unique techniques.

The use of the nullish coalescing operator ?? for added safety.
Array#concat is employed to prevent array mutation. While not necessary here, it's a useful trick for scenarios where mutations are undesired.

const str = 'Lorem ipsum dolor sit amet consectetur adipiscing elit';

const result = str.split(/\s+/); //split on any amount of whitespace
  .reduce((acc, word) => {
    const last = acc[acc.length - 1] ?? "";
    
    const newLast = `${last} ${word}`.trim();
    
    if (newLast.length > 15)
      return acc.concat(word);
    
    return acc.slice(0, -1)
      .concat(newLast);
  }, []);
  
console.log(result);

An alternative implementation can be achieved using only regular expressions:

/(?<=^|\s)\b.{1,15}\b(?=\s|$)/g

This regex matches up to 15 characters as long as they form complete words, avoiding partial matches within words or surrounding white spaces.

const regex = /(?<=^|\s)\b.{1,15}\b(?=\s|$)/g;

const str = 'Lorem ipsum dolor sit amet consectetur adipiscing elit';

const result = [...str.matchAll(regex)].flat();

console.log(result);

Check it out on Regex101

Here are a few examples illustrating how this method works:

Lorem ipsum dolor sit amet consectetur adipiscing elit
^         ^^  ^
|_________||  |
    11     |  |
           |  |
           |  + -> 15th character, but match cannot end due to next non-whitespace symbol 
           + -> whitespace prevents match from ending here

Lorem ipsum dolor sit amet consectetur adipiscing elit
           ^^            ^
           ||____________|
           |      14
           |
           + -> Match cannot start on whitespace and must be preceded by whitespace

Use the array.reduce method to split a string into an array based on specific conditions

Answer №1

Answer №2

Answer №3

Similar questions

Is p-queue designed to utilize multiple threads?

Error: Issue transferring data to controller from Ng-Style

Is it possible to generate a PNG blob using binary data stored in a typed array?

Is there a way to reveal multiple inputs by simply pressing a button?

Can you explain the mechanics behind Google Voice Search? And is there an available API for it?

jQuery - restrict input field based on the value of a different selected field

Prevent dropdown from closing when clicking inside components [react-bootstrap]

Take a custom action once all elements have been rendered with ng-repeat

What is the best way to unselect the "all" selector if one of the inputs is no longer selected?

I am looking for a regular expression that will eliminate any leading white space while still permitting spaces between words

Testing a function in Jest that utilizes the current date

Troubleshooting issues with JavaScript's window.location.href functionality

Exploring the world of ReactJS through array mapping

Using jQuery to eliminate any symbols from a text field

Bypass JWT signature verification in Nestjs with passport-jwt

A handy tool for easily previewing JavaScript code based on my TypeScript within Visual Studio

What is the procedure for turning off hover color on an href element?

Using CSS nth-of-type on the same level of the DOM allows for specific

Ways to Dynamically Extract Elements from an Array using a Loop

Implement a callback function to dynamically generate variables and display them within an HTML element