Question

我在Javascript中有一个looong的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

Mouser在评论中建议的内容，你必须使用find + replace工具删除此代码中的撇号和加号（记事本++有一个，我＆＃39; m肯定sublime也会有一个）然后在sublime中用F12做你的格式化事情，然后用正则表达式重新添加你的撇号和加号。

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

查找内容：＆＃39;（。*？）＆＃39; [\ s]？\ +

替换为： $ 1

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

查找内容：（。*）

替换为：＆＃39; $ 1＆＃39; +

Answer 2

这是一种方式：

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

希望它有所帮助。

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

2 个答案: