How to pad out line to certain length using regex replace and snippets

Question

// My Section -----------------------------------------------------------------

The above is the desired result.

---

Imagine this scenario

// ----------------------------------------------------------------------------
// firebase

// ----------------------------------------------------------------------------
// utils

It is possible to trim lines to a certain length using for example this regex /(^.{20}).*$/$1/, which will give

// -----------------
// firebase

// -----------------
// utils

But what if I want to fill the other lines instead up to the set length like this in one run? Is that possible?

• one regex for only the right fill, not the trim

// -----------------
// firebase --------

// -----------------
// utils -----------

Ages ago, I was doing some regex ninja challenges and we were supposed to do math, so.... regex is magical.

---

What I am ultimately trying to achieve is a VSCode snippet that allows me to write: My Section --
then trigger a snippet that transforms the inserted text into an 80 character wide comment containing

// My Section -----------------------------------------------------------------

https://code.visualstudio.com/docs/editor/userdefinedsnippets

Answer 1

Adding another answer which is very different than my previous macro extension answer.

I made an extension, Find and Transform, which does this rather easily because you can perform a javascript operation, like math, right in a find/replace.

Using this keybinding (in your keybindings.json):

{
  "key": "alt+r",                      // whatever keybinding you want
  "command": "findInCurrentFile",
  "args": {
       
    "find": "(${TM_CURRENT_LINE})",
    
    "replace": "${LINE_COMMENT} $${ return '$1 '.padEnd(79 - '${LINE_COMMENT}'.length, '-') }$$",

    "isRegex": true,
    "restrictFind": "line"    // can have multiple lines with a cursor
}

Alternatively, you can put this (in a slightly different form) into your settings.json from which a command will be created - and so accessible from the Command Palette and more easily synced between set-ups.

---

"replace": "${LINE_COMMENT} $${ return '$1 '.padEnd(79 - '${LINE_COMMENT}'.length, '-') }$$",

Replace with a line comment for the current editor language. Add to that a javascript operation denoted by $${...}$$ to make parsing easier.

return '$1 '.padEnd(79 - '${LINE_COMMENT}'.length, '-') return capture group 1 (followed by one space) and padded out to 80 total characters (must account for the space after the line comment characters // ). Subtracting the length of the line comment characters which can vary by language.

Note that the items which represent strings, like $1 and ${LINE_COMMENT} are denoted as strings by single quotes (you could also use backticks). Otherwise javascript will interpret them as unknown variable names.

If you didn't care about working with different style and length line comments you could use the simpler:

"replace": "// $${ return '$1'.padEnd(79, '-') }$$",

Answer 2

You can use callback function of replace and based on length you can replace values

let str = `// ----------------------------------------------------------------------------
// firebase

// ----------------------------------------------------------------------------
// utils`

let final = str.replace(/^.*$/gm, (match)=>{
  return match.length === 0 ? match : match.length > 20 ? match.substr(0,20) : match + `-`.repeat(20-match.length)
})

console.log(final)