How to easily insert incremental numbers inside repeating code blocks


#1

Hello, I’ve recently switched from Brackets to Atom and love it.

There’s one thing I was never able to do with Brackets and I wonder if there’s an easy way to do it with Atom or a package.

I often need to insert incremental numbers into repeating blocks of html, for instance:

<div class="isotope-item gallery-item col-md-4 col-sm-6 terr">
<a class="prettyPhoto " title="" data-gal="prettyPhoto[gal]" href="images/gallery/01.jpg"><img src="images/gallery/01.jpg" alt=""></a>
</div>

Let’s say I have to insert this block 99 times with the numbers ranging from 01 to 99. What would be the fastest way to do this? I have a plugin for Sublime that does this with find and replace, but I’d love to do it with Atom too.

For instance, search for href="images/gallery/.jpg and insert an incremental number before .jpg.

Can you help me with this, guys?


#2

Don’t, if you can avoid it. This is one of the easiest things to do dynamically.

If you want a shortcut for this in Atom, your best bet is to write a custom command. You can insert text at your cursor position pretty easily with

atom.commands.add 'atom-text-editor', 'user:insertText', ->
    return unless editor = atom.workspace.getActiveTextEditor()

    editor.insertText("I am a string!")

And then just write a for loop that writes your HTML however many times, adding one to the image name each time, and there you go. You would have to manually edit the command every time you set up a new gallery like that, but that’s probably less work than writing a robust package that just takes a target number and automates the process.


#3

Thanks, yeah that’s quite a lot of work. I was kind of hoping there was already an automated way to do this.

I do this on so many web pages, it always seemed strange to me how this feature’s not demanded by more people.

Isn’t there a way to place multiple cursors, one after each occurrence of a particular string?

If you can do that I think I’ve seen some packages allowing you to insert incremental numbers at each cursor’s position.


#4

It should not be too difficult to scan for your chosen string, take from the range of the selection the first or last value, and then use that value for an addCursorAtBufferPosition() call.


#5

Yes, there is:

  1. Open the find-and-replace panel using Cmd+F on macOS or Ctrl+F on other platforms
  2. Type the search string into the find field
  3. Press Enter to execute the search
  4. Press Alt+Enter to select all occurrences of the search string
  5. Press Right to place a cursor after each occurrence of the search string

#6

There’s always emmet
It can expand your html from shorthand, and can easily increment numbers…


#7

Coming from emacs i find this very useful, and was something i missed in atom. So i made a package that does it! https://atom.io/packages/multiple-cursors-functions


#8

Hello.

What does your package give more than … ?


#9

I haven’t tried that sequential-numbers, but it looks like it has more features! But in my opinion, i usually don’t need that many features when inserting numbers. Also, i saw someone wanting something similar to a package in Sublime. (Insert numbers on each line), so i got inspired by that and made a package. Also the package is not just for inserting numbers, but also inserting letters and reversing selections, which i find very useful.