CODEWITHSUNDEEP
htmlvim
Thakur
Thakur

Reputation: 339

VIM deleting/modifying HTML attributes

I'm new to editing html with VIM. I'm using matchit, ultisnips and surround to help me along the way.

One area which I can't seem to accomplish easily is editing attributes.

I want to go from: (cursor is |)

<input type="submit|" name="some_name" value="" id="some_name">

to:

<input type="submit" id="submit_button">

What is the fastest way to do this? Right now, I'm doing a lot of 'f' based searches.

Upvotes: 5

Views: 3449

Answers (6)

gkssjovi
gkssjovi

Reputation: 31

<input type="submit" name="some_name" value="" id="some_name">

You can also use dt>, it will delete until the character >

Upvotes: 0

Pip
Pip

Reputation: 1172

I would use ci> and retype the form. Lot of times my snippets have tons of attributes I don't need like <form action=""> so ci> blows it up and lets me start from scratch when I need to. I find it faster.

Upvotes: 0

Martin
Martin

Reputation: 73

I was also looking for a solution for this, and using w and W wasn't working great for me when dealing with AngularJS where you can have attributes like this:

<input ng-show="product.inUse" ng-model="product.customerPrice" />

What I've started doing is moving my cursor to the whitespace before the attribute, for example here:

<input| ng-show="product.inUse" ng-model="product.customerPrice" />

Then press d2f" (y instead of d for copying), which gives me:

<input| ng-model="product.customerPrice" />

It will look for a " character two times and delete everything including the last one.

Upvotes: 6

Jannunen
Jannunen

Reputation: 394

I usually just use dW, which deletes the name, equals character and the value in parenthesis (including the parenthesis).

In some cases if I want to delete the rest of attributes to the end of the HTML tag I'm using dt/ (delete everything until you find / which is the end of input tag <input ... />)

Upvotes: 9

Peter Rincker
Peter Rincker

Reputation: 45107

Possible solutions

wd2W

This method requires counting so maybe you would rather do wdW and just hit . until it is correct.

wd/ id<cr>

Moves to the next word so the start of name=".." the delete with d til / id. This solution can also delete across lines. You can use /... with other operators as well, e.g. c, y, and =.

Of course you can do the method you are using currently with f and just repeat with .

Upvotes: 5

Xavier T.
Xavier T.

Reputation: 42218

For your example, I would use: wdw.....wwci"submit_button

  • w to move at the end of the current w
  • dw to erase a "word"
  • then . to repeat the last command and erase as many word as you want.
  • ww to move quickly between the "
  • ci" to change content inside "
  • submit_button
  • ESC

See :help text-objects for more explanation on ciw. (please not there is a tag text object so you can things like cit to change content of a tag quickly.

You could probably use something like wd4w but you have to be sure beforehand that you want to erase 4 words.

Have you heard about Zencoding.vim ?

This is plugin designed to quickly write html or css.

I am not sure there are features to edit, but to write new codes it beats everything.

Upvotes: 2

Related Questions