如何自动缩进 html 写成字符串？

Question

我在 Javascript.

里面有一长串 HTML

有什么方法可以自动缩进吗？

Sublime Text 中的常规方式（按 F12）将不起作用，因为 Sublime 不知道它是 HTML。

这是其中的一部分：

        '<ul class="obj-ul">' +
        '<li ng-repeat="(key, val) in argVal">' +
        '<p class="arg-key">{{key}}</p>' +
        '<span class="arg-colon">:</span>' +
        '<div ng-if="utils.isPrimitive(val)" class="inline-block">'+
        '<p ng-click="editVal=!editVal" ng-show="!editVal" class="arg-val">{{argVal[key]}}</p>' +
        '<input ng-show="editVal" ng-model="argVal[key]" ng-blur="editVal=!editVal" class="arg-val" />' +
        '</div>'+
        '<div ng-if="!utils.isPrimitive(val)" class="inline-block">'+
        '<rapid-args arg-val="argVal[key]"></rapid-args>' +
        '</div>'+
        '</li>' +
        '<div ng-if="utils.showButtons.showButtonInObject(templateArgVal)">' +
        '<button ng-click="vars.show_addObjectItem=!vars.show_addObjectItem">+</button>'+
        '<div ng-if="vars.show_addObjectItem" class="add-item">'+
        '<input ng-model="newKey" type="text" class="arg-key"/>'+
        '<span class="arg-colon">:</span>' +
        '<div id="new-value">'+
        '<div ng-if="!vars.show_addObjectValue" class="value-types">'+
        '<p ng-click="objects.addItem(argVal, newKey, \'array\'); vars.show_addObjectItem=!vars.show_addObjectItem" class="value-types-type">Array</p>'+
        '<p ng-click="objects.addItem(argVal, newKey, \'object\'); vars.show_addObjectItem=!vars.show_addObjectItem" class="value-types-type">Object</p>'+
        '<p ng-click="vars.show_addObjectValue=!vars.show_addObjectValue" class="value-types-type">String</p>'+
        '<p>{{showValInput}}</p>' +
        '</div>' +
        '<div ng-if="vars.show_addObjectValue">'+
        '<input ng-model="newVal" type="text" class="arg-key"/>'+
        '<button ng-click="objects.addNewKeyVal(argVal, newKey, newVal); vars.show_addObjectValue=!vars.show_addObjectValue">&#10003</button>'+
        '<button ng-click="vars.show_addObjectValue=!vars.show_addObjectValue">Cancel</button>'+
        '</div>' +
        '</div>' +
        '</div>' +
        '</div>'+
        '</ul>' +

Answer 1

方法如下：

删除所有用于连接不同行的引号和 +，即使其成为一个字符串（您可以使用搜索替换 -> 全部替换），中间没有任何 +加入。
复制生成的字符串并粘贴到 http://www.freeformatter.com/html-formatter.html 或任何其他在线 html 格式化程序。
复制结果并粘贴回去。

希望对您有所帮助。

Answer 2

Mouser 在评论中提出的一些建议，您将不得不使用查找+替换工具从该代码中删除撇号和加号（notepad++ 有一个，我相信 sublime 也有一个） ) 然后在 sublime 中使用 F12 进行格式化，然后使用正则表达式重新添加撇号和加号。

这里演示了如何使用 Notepad++（或任何基于正则表达式的查找和替换字符串操纵器）删除字符串格式：

查找内容：'(.*?)'[\s]?\+

替换为：$1

要在格式化后再次添加它们，您只需执行以下操作：

查找内容：(.*)

替换为：'$1' +

如何自动缩进 html 写成字符串？

How to auto indent html written as a string?

html

javascript

indentation

auto-indent