What is the best way to iterate through the split result array of a multiline string in order to reformat specific lines and newlines?

I have a string of data with line breaks in the middle. For instance:

"Product Name \n Product Color \n Product Quantity \n Product Location \n Product Size \n Product Power"

The number of elements in the string could be endless.

I am looking to substitute the \n with >>>> \n, but only when the line numbers exceed 3 and not on the last line. The last line should display (end).

I've attempted using map, splitting and replacing. However, I am struggling to loop through the array to pinpoint the lines that need modification, as well as rejoining them after all lines are updated.

The input is:

"Retract-A-Banner\n**Template:\nFull Color\nImprint Information:\nCL: 488 Special Ops Wing\n353 SOW Integrated Resilience Optimization Network\n"

Expected Output:

"Retract-A-Banner\n**Template:\nFull Color >>>>\nImprint Information: >>>>\nCL: 488 Special Ops Wing >>>>\n353 SOW Integrated Resilience Optimization Network(end)\n"
javascriptarraysstringsplitmultiline

Answer №1

Divide by \n and reconstruct your string following these guidelines:

  1. If it is the final one, include (end)
  2. If the line exceeds 3, append >>>> \n
  3. Otherwise, simply add a \n

UPDATE:

Check if the last string is \n, and remove that value from the array.

const str = "Retract-A-Banner\n**Template:\nFull Color\nImprint Information:\nCL: 488 Special Ops Wing\n353 SOW Integrated Resilience Optimization Network\n";

const splitted = str.split('\n');
let output = '';

if (splitted[splitted.length - 1] === '')
  splitted.length--;
  
for (let i = 0; i < splitted.length; i++) {
  if (i + 1 === splitted.length) {
    output += splitted[i] + ' (end)';
  } else if (i >= 2) {
    output += splitted[i] + ' >>>> \n';
  } else {
    output += splitted[i] + '\n';
  }
}

console.log(output);

Answer №2

It's not always necessary to use an iterating approach for the .split(/\n/) operation when working with arrays.

Instead, there is a more direct method that involves accessing data straightforwardly...

The assembled return value can be created on the spot (based on the last line's content) by incorporating...

function parseNewlines(value) {

  const[ line1, line2, ...rest ] = String(value).split(/\n/);
  const lastLine = rest.pop();

  return [
    `${ line1 }\n${ line2 }\n${ rest.join(' >>>> \n') }`,

    (lastLine === '')
      && `(end)\n`
      || ` >>>> \n${ lastLine }(end)`,

  ].join('');
}

const originalTestValue = `Retract-A-Banner
**Template:
Full Color
Imprint Information:
CL: 488 Special Ops Wing
353 SOW Integrated Resilience Optimization Network
` // be aware of the last line.

const alteredTestValue = `Retract-A-Banner
**Template:
Full Color
Imprint Information:
CL: 488 Special Ops Wing
353 SOW Integrated Resilience Optimization Network` // be aware of the last line.

// be aware of the last line.
const expectedResult = `Retract-A-Banner\n**Template:\nFull Color >>>> \nImprint Information: >>>> \nCL: 488 Special Ops Wing >>>> \n353 SOW Integrated Resilience Optimization Network(end)\n`;

// be aware of the last line.
const expectedResultOfAlteredValue = `Retract-A-Banner\n**Template:\nFull Color >>>> \nImprint Information: >>>> \nCL: 488 Special Ops Wing >>>> \n353 SOW Integrated Resilience Optimization Network(end)`;

console.log(
  `OP's use case ...\n${ parseNewlines(originalTestValue) }`
);
console.log(
  `altered use case ...\n${ parseNewlines(alteredTestValue) }`
);
console.log('\n');

console.log(
  "OP's use case ...\ntest passed ?..",
  (parseNewlines(originalTestValue) === expectedResult)
);
console.log('\n');

console.log(
  "altered use case ...\ntest passed ?..",
  (parseNewlines(alteredTestValue) === expectedResult)
);
console.log(
  "altered use case and altered expectation ...\ntest passed ?..",
  (parseNewlines(alteredTestValue) === expectedResultOfAlteredValue)
);
.as-console-wrapper { min-height: 100%!important; top: 0; }

However, if you prefer an iterating approach, you can implement it using a traditional reduce function.

function parseNewlines(value) {
  return String(value)

    .split(/\n/)
    .reduce((result, line, idx, arr) => {
      return [

        result,
        (idx < (arr.length - 1))

          ? `${ (idx >= 3) && ' >>>> ' || '' }\n${ line }`
          : (line === '')
              && `(end)\n`
              || ` >>>> \n${ line }(end)`,

      ].join('');
    });
}

const originalTestValue = `Retract-A-Banner
**Template:
Full Color
Imprint Information:
CL: 488 Special Ops Wing
353 SOW Integrated Resilience Optimization Network
` // be aware of the last line.

const alteredTestValue = `Retract-A-Banner
**Template:
Full Color
Imprint Information:
CL: 488 Special Ops Wing
353 SOW Integrated Resilience Optimization Network` // be aware of the last line.

// be aware of the last line.
const expectedResult = `Retract-A-Banner\n**Template:\nFull Color >>>> \nImprint Information: >>>> \nCL: 488 Special Ops Wing >>>> \n353 SOW Integrated Resilience Optimization Network(end)\n`;

// be aware of the last line.
const expectedResultOfAlteredValue = `Retract-A-Banner\n**Template:\nFull Color >>>> \nImprint Information: >>>> \nCL: 488 Special Ops Wing >>>> \n353 SOW Integrated Resilience Optimization Network(end)`;

console.log(
  `OP's use case ...\n${ parseNewlines(originalTestValue) }`
);
console.log(
  `altered use case ...\n${ parseNewlines(alteredTestValue) }`
);
console.log('\n');

console.log(
  "OP's use case ...\ntest passed ?..",
  (parseNewlines(originalTestValue) === expectedResult)
);
console.log('\n');

console.log(
  "altered use case ...\ntest passed ?..",
  (parseNewlines(alteredTestValue) === expectedResult)
);
console.log(
  "altered use case and altered expectation ...\ntest passed ?..",
  (parseNewlines(alteredTestValue) === expectedResultOfAlteredValue)
);
.as-console-wrapper { min-height: 100%!important; top: 0; }

Answer №3

Here's a slightly modified version:

let message =
  "Retract-A-Banner\n**Template:\nFull Color\nImprint Information:\nCL: 488 Special Ops Wing\n353 SOW Integrated Resilience Optimization Network\n";

function splitEnteries(input) {
  return input.split("\n").filter((value) => value);
}

function generateOutput(entries) {
  const totalEntries = entries.length;
  return entries.reduce((output, currentEntry, index) => {
    var separator = index > 2 ? " >>>> \n" : "\n";
    if (index == totalEntries - 1) {
      separator = "(end)\n";
    }
    return output + currentEntry + separator;
  }, "");
}
console.log(generateOutput(splitEnteries(message)));

In the splitEnteries function, we use the filter method to remove empty entries that are caused by new line characters at the end of the string. Finally, we add the (end) separator as the last element.

Answer №4

  • Transform a string into an array of strings

     string.split(/\n/)

  • Next, apply .flatMap() along with a chained ternary as the callback. The conditions are based on the index value

      idx < 3 ? [str+' \n']
  :
  idx === arr.length -1 ? [str+' (end)'] 
  : 
  [str+' >>>> \n']

  • Finally, join the array elements back into a single string using .join('')

let test = `Retract-A-Banner\nTemplate:\nFull Color\nImprint Information:\nCL: 488 Special Ops Wing\n353 SOW Integrated Resilience Optimization Network\n" Expected Output:"Retract-A-Banner\nTemplate:\nFull Color \nImprint Information: \nCL: 488 Special Ops Wing \n353 SOW Integrated Resilience Optimization Network`;

const formatLines = string => string.split(/\n/).flatMap((str, idx, arr) => idx < 3 ? [str + ' \n '] : idx === arr.length - 1 ? [str + ' (end) '] : [str + ' >>>> \n ']).join('');

console.log(formatLines(test));

Answer №5

Here is a possible solution for your request:

var text = `Retract-A-Banner\nTemplate:\nFull Color\nImprint Information:\nCL: 488 Special Ops Wing\n353 SOW Integrated Resilience Optimization Network\n`.split("\n");
text.forEach((line,index) => {
    if (index > 2) {
       text[index] = `>>>>\\n${line}`
    } else {
       index > 0 ? `\\n${line}` : text[index];
    }
})
var finalText = text.join("")+"(end)";
console.log(finalText);

Please note that I have included an extra backslash to escape the \n in the code. Let me know if this meets your requirements.

Answer №6

If you want to include the symbol >>> in your text, you can utilize the regex pattern: (?<=(.+\\n.+){2,})(?=\\n.)

  • The pattern (?<=(.+\\n.+){2,}) is a positive lookbehind that matches three lines
  • The pattern (?=\n.) is a positive lookahead for a newline followed by any character

Furthermore, you can also use a similar regex pattern (?<=.)(?=\n*$) to append '(end)' to the last line.

const input = "Retract-A-Banner\\n**Template:\\nFull Color\\nImprint Information:\\nCL: 488 Special Ops Wing\\n353 SOW Integrated Resilience Optimization Network\\n";

const output = input
.replace(/(?<=(.+\\n.+){2,})(?=\\n.)/g, ' >>>> ')
.replace(/(?<=.)(?=\n*$)/, '(end)');

console.log(input);
console.log(output);

In case you need to include a literal backslash followed by 'n' in your string, it should be formatted as '\\\n' within your JS string.

In such scenario, you can apply the regex pattern (?<=(.+\\\n.+){2,})(?=\\n.) to insert the symbol >>> and the pattern (?=\\n$) for the '(end)'.

const input = "Retract-A-Banner\\\\n**Template:\\\\nFull Color\\\\nImprint Information:\\\\nCL: 488 Special Ops Wing\\\\n353 SOW Integrated Resilience Optimization Network\\\\n";

const output = input
.replace(/(?<=(.+\\\n.+){2,})(?=\\n.)/g, ' >>>> ')
.replace(/(?=\\n$)/, '(end)');

console.log(input);
console.log(output);

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

Monitoring Array Modifications in Kotlin

Is there a way to be notified when the content of an array changes? I have been able to notify the setting of the array, but adding new items does not trigger any notifications. var array: MutableMap<String, List<String>> = mutableMapOf() ...

arrayskotlin

Choose autocomplete feature from an external source within the context of AngularJS

I am currently working on an autocomplete textbox and I stumbled upon this script that I found through my search efforts. .controller('autoCompleteCTRL', function($scope, $rootScope){ $rootScope.searchItems = [ "ActionScript", ...

javascriptangularjs

Issues encountered when using Jquery click event for multiple buttons isn't functional

I am using PHP to fetch deliveries from MySQL, and I have a scenario where when the user clicks on the Accept button, I want to display one form, and if they click on Revision, another form should be shown. While I know how to achieve this functionality, i ...

javascriptphpjquery

What is the best way to include the API body in a GET request?

I'm facing an issue with passing parameters to the body instead of the query in my code. Here's what I have attempted: const fetchData = async () => { let response = await apiCall("URL" + { "companyArr": ["SBI Life Insurance C ...

javascriptreactjsapiget

Using an if statement within a map function in a React component

I am facing a challenge with using an if statement inside a map function without changing the return value. Here is my code snippet: this.example = this.state.data.map((item) => { return( <div> {if(1 + 1 == 2){ dat ...

javascriptreactjs

Euro currency formatting

I've been developing a component that formats input values in various currencies like Dollar and Euro, including commas and dots. Although my Dollar input works fine, I'm struggling with the Euro input as it doesn't generate the correct valu ...

javascriptreactjscurrency

JQuery submitting a partial view form displays an empty page along with a JSON response

I am working on an Edit function in MVC4 public ActionResult Edit(UserGroup usergroup) { usergroup.created_date = DateTime.Now; usergroup.modified_date = DateTime.Now; db.Entry(usergroup).State = EntityState.Mod ...

javascriptjqueryhtmlasp.net-mvc-4

How to Style a Dropdown List with a Background Image?

Is there a way to overlay a selectbox on top of a background image? I believe this enhancement could greatly improve the user experience. View Background Image https://i.sstatic.net/TcyT2.png <select id='selectbox'> <option> ...

javascripthtmlcssvue.jscanvas

Error: A DOMException was caught in the promise while trying to push the router

Currently, I am facing an issue while working with React. An Uncaught DOMException occurs when trying to push the router. This exception specifically happens when I attempt to push a new URL into the router using an event triggered from a button in a mod ...

javascriptreactjs

It appears that Vue.js's this.$nextTick() function does not properly wait for the DOM to finish rendering

Having trouble with nextTick() in Vue. Here's the template code: In the template: <template> <div> <div v-if="editing"> <span ref="theInput" contenteditable="true">{{ someValue }}</span> < ...

javascriptvue.js

How can I find and import design components from Vercel?

I am attempting to create a dropdown menu using the packages provided by Vercel https://vercel.com/design/menu Unfortunately, the documentation does not provide clear instructions on how to import these packages. I have been struggling for about an hour ...

javascriptnode.jsnext.jsvercel

Is there a way to manipulate arrays into slices within a match clause?

I have a situation where I have an enum with variants that contain arrays of different lengths. When attempting to use a `match` statement on this enum: enum EnumArray { One([i32; 1]), Two([i32; 2]), } fn main() { let arr = EnumArray::One([1] ...

arraysenumsrustpattern-matching

Ways to resolve the issue of receiving the error message "Uncaught ReferenceError: require is not defined" when

When attempting to use the readline function for input, an error is being displayed. What could be causing this issue? enter image description here const readline = require("readline").createInterface({ input: process.stdin, output: process.stdout, }) ...

javascriptnode.jsstdin

How does selecting one dropdown option within a dynamic form field lead to the automatic activation of another dropdown list in a separate form field?

My goal is to create a dynamic form field with a dropdown list that allows users to add and delete multiple contributors. Currently, my code can successfully add and remove multiple users. However, I encounter an issue where selecting the dropdown list tri ...

javascripthtmlangulartypescriptangular-reactive-forms

Parsing DXF files using only plain JavaScript

Currently, I am immersed in a CNC project and aiming to convert DXF files into objects using JS. Initially, I attempted using SVGs but the results were not as expected - instead of shapes, the drawings exported as lines (e.g., a square appearing as four se ...

javascriptparsingnpmdxf

The paths required are not correct following the transpilation of a TypeScript file using Babel

Issue Every time I use nodemon with npm run start, I encounter the error message "Error: Cannot find module 'Test'". Similarly, when I build files using npm run build and try to run ./dist/index.js, I face the same issue. It seems that the requ ...

javascripttypescriptbabeljs

Let's explore further - delving into JSON & array manipulation using the foreach loop in Pure JavaScript

Although I have some experience with Java Script, I still consider myself a beginner in certain areas, particularly when it comes to accessing JSON objects and arrays. I've tried various syntax and options for accessing arrays using [], but so far, I ...

javascriptarraysjson

How can I implement a hover-over image change effect similar to the one seen in Gmail accounts?

I am attempting to implement a feature that allows users to change their image, similar to what can be done in a GMail account. When the user hovers over the image, an option to "change image" should appear. This may be a new concept for me because I am ...

javascripthtmlcss

Eliminate unnecessary transparency in React Material UI Tooltip / Popper by adjusting opacity restrictions

Looking to integrate the Tooltip component from the React Material UI Library into my project. The code snippet I am using is as follows: <WhiteOnDarkGreyTooltipWithControls disableTouchListener disableFocusListener title={ <Text selectable ...

javascriptcssreactjsmaterial-ui

Using scripted <svg> with <defs> and attempting to reference it via JavaScript results in failure

My goal is to dynamically generate svg path elements in html using JavaScript. I would like to place these paths within a <defs> element so that they can be reused later in <use> xlink:href elements. However, after creating the paths (by pr ...

javascripthtmlsvg