使用正则表达式在sublime中剪切/粘贴线条

Question

使用sublime或其他方法将“data-filter-tags”移动到上面一行的最佳方法是什么？

<div class="col-4">
   <a class="app-list__item">
        <div class="display-4" data-filter-tags="angle-down">
            <i class="fal fa-angle-down"></i>
        </div>
    </a>
</div>
<div class="col-4">
   <a class="app-list__item">
        <div class="display-4" data-filter-tags="angle-left">
            <i class="fal fa-angle-left"></i>
        </div>
    </a>
</div>

结果如下：

<div class="col-4">
   <a class="app-list__item" data-filter-tags="angle-down">
        <div class="display-4">
            <i class="fal fa-angle-down"></i>
        </div>
    </a>
</div>
<div class="col-4">
   <a class="app-list__item" data-filter-tags="angle-left">
        <div class="display-4">
            <i class="fal fa-angle-left"></i>
        </div>
    </a>
</div>

Answer 1

代码

See regex in use here

(<[^>]*)(>\s*.*?)(\s*data-filter-tags="[^"]*")

替换：$1$3$2

结果

输入

<div class="col-4">
   <a class="app-list__item">
        <div class="display-4" data-filter-tags="angle-down">
            <i class="fal fa-angle-down"></i>
        </div>
    </a>
</div>
<div class="col-4">
   <a class="app-list__item">
        <div class="display-4" data-filter-tags="angle-left">
            <i class="fal fa-angle-left"></i>
        </div>
    </a>
</div>

输出

<div class="col-4">
   <a class="app-list__item" data-filter-tags="angle-down">
        <div class="display-4">
            <i class="fal fa-angle-down"></i>
        </div>
    </a>
</div>
<div class="col-4">
   <a class="app-list__item" data-filter-tags="angle-left">
        <div class="display-4">
            <i class="fal fa-angle-left"></i>
        </div>
    </a>
</div>

说明

• (<[^>]*)将以下内容捕获到捕获组1中
  • <按字面意思匹配
  • [^>]*匹配除>以外的任何字符
• (>\s*.*?)将以下内容捕获到捕获组2中
  • >按字面意思匹配
  • \s*匹配任意数量的空白字符
  • .*?任意次数匹配任何字符，但尽可能少（不包括换行符）
• (\s*data-filter-tags="[^"]*")将以下内容捕获到捕获组3中
  • \s*匹配任意数量的空白字符
  • data-filter-tags="按字面意思匹配
  • [^"]*匹配除"以外的任何字符
  • "按字面意思匹配

替换$1$3$2只是重新排序捕获的文本，使第三个捕获组放在第一个捕获组之后，但放在第二个捕获组之前。