Как HTML-код, написанный в одну строку, преобразовать в несколько строк в зависимости от глубины вложенности тегов?

[web-developer]

Нужно, чтобы при нажатии сочетания клавиш, выделенный HTML-код, написанный в одну строку, по шаблону преобразовывался в несколько строк в зависимости от глубины вложенности тегов.

Например:

До

            <ul>
                <li><label for=""></label><input type="text"></li>
                <li><label for=""></label><input type="text"></li>
                <li><label for=""></label><input type="text"></li>
            </ul>

После

             <ul>
                <li>
                    <label for=""></label>
                    <input type="text">
                </li>
                <li>
                    <label for=""></label>
                    <input type="text">
                </li>
                <li>
                    <label for=""></label>
                    <input type="text">
                </li>
            </ul>

Пример 2.

                <p class="appointment-item"><input type="text" name="time" id="" placeholder="10:00" value=""></p>

                <p class="appointment-item">
                    <input type="text" name="date" id="" placeholder="08.10.2017" value="">
                </p>

И так далее.