Bash script with regex find/replace to vertically-align assignment operators in file

Question

I have a collection of (jade template) files with properties listed like this:

a.btn(data-ng-class = "{true:'black', false:'blue'}[viewModel.currentDictionaryUid == '<%= full.uid %>']", href = "#<%= viewRoot %>/<%= full.uid %>")

I'm looking for a quick way to possibly convert them to look more like this:

a.btn(data-ng-class = "{true:'black', false:'blue'}[viewModel.currentDictionaryUid == '<%= full.uid %>']"
      href          = "#<%= viewRoot %>/<%= full.uid %>")

All of the comma seperated properties are now on separate lines, the keys all begin at the same x number of characters from the left, and the equals signs also all being at the same number of x characters from the left.

--- EDIT:

Example test file:

html
  body
    // HEADER GOES HERE
    .header.navbar.navbar-inverse.navbar-fixed-top(style = "z-index:1001;", data-ng-controller = "ControllerWidgetCoreHeader", data-ng-include = "'viewWidgetCoreHeader'")
    .page-container.row-fluid(data-ng-class = "{'sidebar-closed':sidebarClosed}")
      // LEFT MENU GOES HERE
      .page-sidebar.nav-collapse.collapse(data-ng-hide = "quizMode", data-ng-class = "{'in':topBarOpen}", style = "z-index:1000;", data-ng-controller = "ControllerWidgetCoreLeftMenu", data-ng-include = "'viewWidgetCoreLeftMenu'")
      .page-content(data-ng-class = "{'page-content-quiz-mode':quizMode}")
        // PAGE CONTENT GOES HERE
        .container-fluid(data-ng-controller = "ControllerCoreWidgets", data-ng-include = "'viewCoreWidgets'")
    .footer(data-ng-show = "false", data-ng-controller = "ControllerWidgetCoreFooter", data-ng-include = "'viewWidgetCoreFooter'")

---

Error I'm encountering: (Mac OSX 10.8.4)

Casey-Flynns-MacBook-Air:views casey$ sed -i'' 's@,\s\+\([a-z]\+\)\s\+=@\n\t\1 =@g' **/*.jade
sed: 1: "viewsDirectives/viewCol ...": invalid command code v

Also on a single file:

Casey-Flynns-MacBook-Air:views casey$ sed -i'' 's@,\s\+\([a-z]\+\)\s\+=@\n\t\1 =@g' viewCore.jade
sed: 1: "viewCore.jade": invalid command code v

Answer 1

Try doing this :

sed 's@,\s\+\([a-z]\+\)\s\+=@\n\t\1 =@g' **/*.jade

and if it fits your needs, you can use inplace substitution with -i switch :

sed -i 's@,\s\+\([a-z]\+\)\s\+=@\n\t\1 =@g' **/*.jade

And MacOsX version ( it treat -i switch the odd way ) :

sed -i'' 's@,\s\+\([a-z]\+\)\s\+=@\n\t\1 =@g' **/*.jade

Answer 2

Not sure if this would help but you can try something like:

awk -v RS="," '{ print $0 }' file | column -t | awk '!/=/ {$1=$1}1'

Test:

$ cat file
html
  body
    // HEADER GOES HERE
    .header.navbar.navbar-inverse.navbar-fixed-top(style = "z-index:1001;", data-ng-controller = "ControllerWidgetCoreHeader", data-ng-include = "'viewWidgetCoreHeader'")
    .page-container.row-fluid(data-ng-class = "{'sidebar-closed':sidebarClosed}")
      // LEFT MENU GOES HERE
      .page-sidebar.nav-collapse.collapse(data-ng-hide = "quizMode", data-ng-class = "{'in':topBarOpen}", style = "z-index:1000;", data-ng-controller = "ControllerWidgetCoreLeftMenu", data-ng-include = "'viewWidgetCoreLeftMenu'")
      .page-content(data-ng-class = "{'page-content-quiz-mode':quizMode}")
        // PAGE CONTENT GOES HERE
        .container-fluid(data-ng-controller = "ControllerCoreWidgets", data-ng-include = "'viewCoreWidgets'")
    .footer(data-ng-show = "false", data-ng-controller = "ControllerWidgetCoreFooter", data-ng-include = "'viewWidgetCoreFooter'")

---

$ awk -v RS="," '{ print $0 }' file | column -t | awk '!/=/ {$1=$1}1'
html
body
// HEADER GOES HERE
.header.navbar.navbar-inverse.navbar-fixed-top(style  =       "z-index:1001;"
data-ng-controller                                    =       "ControllerWidgetCoreHeader"
data-ng-include                                       =       "'viewWidgetCoreHeader'")
.page-container.row-fluid(data-ng-class               =       "{'sidebar-closed':sidebarClosed}")
// LEFT MENU GOES HERE
.page-sidebar.nav-collapse.collapse(data-ng-hide      =       "quizMode"
data-ng-class                                         =       "{'in':topBarOpen}"
style                                                 =       "z-index:1000;"
data-ng-controller                                    =       "ControllerWidgetCoreLeftMenu"
data-ng-include                                       =       "'viewWidgetCoreLeftMenu'")
.page-content(data-ng-class                           =       "{'page-content-quiz-mode':quizMode}")
// PAGE CONTENT GOES HERE
.container-fluid(data-ng-controller                   =       "ControllerCoreWidgets"
data-ng-include                                       =       "'viewCoreWidgets'")
.footer(data-ng-show                                  =       "false"
data-ng-controller                                    =       "ControllerWidgetCoreFooter"
data-ng-include                                       =       "'viewWidgetCoreFooter'")