How to auto indent html written as a string?

Question

I have a looong string of HTML inside a Javascript.

Is there any way I can auto indent it?

The conventional way in Sublime Text (pressing F12) won't work because Sublime doesn't know it's HTML.

Here's a portion of it:

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

Sort of what Mouser suggested in a comment, you're going to have to remove the apostrophe's and plus signs from this code using a find+replace tool (notepad++ has one, I'm sure sublime will have one too) then do your formatting thing with F12 in sublime and then re-add your apostrophe's and plus signs using regex.

Here's a demonstration of how to remove your string formatting using Notepad++ (or any Regex based find and replace string manipulator):

Find What: '(.*?)'[\s]?\+

Replace With: $1

To add them back again after you've formatted you can simply do:

Find What: (.*)

Replace With: '$1' +