Find and Replace with Visual Studio Code 將單元格 alignment 替換為 class

Question

由於align 屬性被認為已過時，因此我正在清理代碼以將其刪除並替換為 CSS class。我正在嘗試確定是否可以使用 VS Code 中的查找和替換（或其他方式）來執行此操作。

例如，我可能有一些 html，如下所示：

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

我想改成

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

基本上刪除align屬性並添加具有特定值的 class 屬性或向現有 class 屬性添加特定值。 有沒有辦法使用 VS Code 中的編輯...替換選項來執行此操作？ 我知道我可以根據正則表達式找到但不確定我將如何 go 關於替換，因為這變成了

1. 找到對齊標簽
2. 去掉它
3. 在<td>或<th>標簽中找到一個 class 屬性並添加相應的 class
4. 如果沒有 class 屬性，請添加一個具有適當的 class 的屬性。

顯然第 1 步和第 2 步很簡單，我不確定第 3 步和第 4 步。 我非常樂意運行 3 個單獨的查找和替換命令（一個用於左、中和右）。

我在這里有任何選擇嗎（我對擴展持開放態度）？

更新：

@Mark 的答案是正確的，我能夠使用Replace Rules extension 將幾個查找和替換命令鏈接在一起。 有了它，我可以打開一個文件，運行一次擊鍵來查找和替換所有內容，並清理 class 屬性中的額外空間。

Answer 1

試試這個：

查找： align="(.*?)"(.*?) class="(.*?)"|class="(.*?)"(.*?) align="(.*?)"|align="(.*?)"

替換： class="$7$1$6 $3$4"$2$5

請參閱regex101 演示。

我有點驚訝它的效果和它一樣好（我包括了幾個你沒有的其他測試用例）。 唯一的問題（到目前為止......）是它可能導致一個雜散空間，如：

<td class="left ">Title</td> // 僅在沒有class屬性時發生

正如您在演示頁面中看到的那樣。 然后您可以搜索"並僅替換為" 。 它可以通過條件替換來處理，但 vscode 查找/替換不允許這些。

在某種程度上，屬性將被重新排序，以便class屬性排在第一位，但並非總是如此 - 您沒有提到這一點 - 在第一個class或align屬性之前出現的任何屬性都不會被移動。 否則，如果id或title之類的屬性介於class <-> attribute （以任何順序）之間，它們將被放在最后。