Geek Answers Handbook

VIM removing / changing HTML attributes

I am new to html editing with VIM. I use matchit, ultisnips and surround to help me along the way.

One area that I cannot easily accomplish is attribute editing.

I want to go from: (cursor is |)

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

in

 <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.

+4
source share
5 answers

Possible solutions

 wd2W

This method requires a count, so maybe you would rather do wdW and just click . until he becomes right.

 wd/ id<cr>

Going to the next word, therefore remove the beginning name=".." with d til / id . This solution can also delete line by line. You can use /... for other operators, for example. c , y and = .

Of course, you can use the method that you are currently using with f , and just repeat with .

+3
source

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

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

For more on ciw see :help text-objects . (please, there is no tag text object so you can, for example, cit quickly change the contents of a tag.

Perhaps you could use something like wd4w , but you should be sure that you want to erase 4 words.

Have you heard of Zencoding.vim ?

This is a plugin designed to quickly write html or css.

I'm not sure if there are functions for editing, but for writing new codes it surpasses everything.

+2
source

I usually use dW , which removes the name, equal sign and value in brackets (including brackets).

In some cases, if I want to remove the remaining attributes at the end of the HTML tag, I use dt / (delete everything until you find / which is the end of the input tag <lt, input ... />)

+2
source

I was also looking for a solution for this, and using w and W did not work fine for me when working with AngularJS, where you can have attributes like this:

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

What I started to do is move my cursor to the spaces before the attribute, for example here:

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

Then press d2f "(y instead of d to copy), which gives me:

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

He will search for the symbol "twice" and delete everything, including the last.

0
source

I would use ci> and retype the form. Many times my fragments have tons of attributes that I don’t need, for example, <form action=""> , so ci> resets it and allows me to start from scratch when I need it. I find it faster.

0
source

More articles:


All Articles