CODEWITHSUNDEEP
visual-studio-code
Jason
Jason

Reputation: 15355

Find and Replace with Visual Studio Code to replace cell alignment with a class

Since the align attribute is considered obselete I am cleaning up code to remove it and replace with a CSS class. I'm trying to determine if there is a way to do this using find and replace (or something else) in VS Code.

As an example, I might have some html that looks like this:

<table>
    <tr>
        <td align="left" class="someclass" id="mainTitleCell" title="Title1">Title1</td>
        <td align="center" title="Title2">Title2</td>
        <td class="someclass" align="right" title="Title3">Title3</td> <!-- attributes are not always in the same order -->
    </tr>
    <tr>
        <td align="left">Title</td>
        <td align="center">Title</td>
        <td align="right">Title</td>
    </tr>
</table>

which I would like to change to

<table>
    <tr>
        <td class="left someclass" id="mainTitleCell" title="Title1">Title1</td>
        <td class="center" title="Title2">Title2</td>
        <td class="right someclass" title="Title3">Title3</td>
    </tr>
    <tr>
        <td class="left">Content</td>
        <td class="center">Content</td>
        <td class="right">Content</td>
    </tr>
</table>

Basically removing the align attribute and either adding a class attribute with a specific value OR adding a specific value to an existing class attribute. Is there a way to do this with the Edit...Replace option in VS Code? I know I can find based on a regex but not sure how I would go about the replace since this becomes

  1. Find the align tag
  2. Remove it
  3. Find a class attribute in the <td> or <th> tag and add the appropriate class
  4. If there is no class attribute, add one with the appropriate class.

Obviously step #1 & 2 are easy, it's #3 & 4 that I'm not sure of. I'd be totally happy with having to run 3 separate find and replace commands (one for left, center and right).

Do I have any options here (I am open to extensions)?

UPDATE:

@Mark had the right answer and I was able to chain together several find and replace commands using the Replace Rules extension. With that I can open a file, run a single keystroke to find and replace everything and clean up the extra spaces in the class attribute.

Upvotes: 0

Views: 554

Answers (1)

Mark
Mark

Reputation: 182641

Try this:

Find: align="(.*?)"(.*?) class="(.*?)"|class="(.*?)"(.*?) align="(.*?)"|align="(.*?)"

Replace: class="$7$1$6 $3$4"$2$5

See regex101 demo.

I'm a little surprised this works as well as it does (I included a couple of other test cases you didn't). The only issue (thus far...) is that it can result in one stray space, as in:

<td class="left ">Title</td> // only happens when there is no class attribute

as you can see in the demo page. You could then search for " and replace with just ". It could be handled by a conditional replacement but vscode find/replace doesn't allow those.

To some degree attributes will be re-ordered so that the class attribute is first, but not always - you didn't mention that as a concern - any attribute that occurs before either the first class or align attribute will not be moved. Otherwise, attributes like id or title if they are between class<->attribute (in any order) will be put last.

Upvotes: 0

Related Questions