создать собственный простой парсер в JavaScript для дальнейшей обработки

Question

Для моего проекта мне нужно проанализировать несколько простых строк в формате html и обработать их.

Допустим, у меня есть строка типа:

Hey <font face="Times New Roman" size="14">this text look <i>cool<i> and <b>fancy <i>very fancy<i></b> however </font> I'm ok <u>with</u> it.

Что бы я хотелЯ хотел бы получить с моей рекурсивной функцией массив с различными объектами в качестве дочерних, структурированных следующим образом:

var myArr = myParse(myString);

myArr[0] = {
    "text": "Hey",
}
myArr[0] = {
    "text": "this text look ",
    "face": "Times New Roman",
    "size": 14
}
myArr[1] = {
    "text": "cool",
    "face": "Times New Roman",
    "size": 14,
    "italic": true
}
myArr[2] = {
    "text": " and ",
    "face": "Times New Roman",
    "size": 14
}
myArr[3] = {
    "text": "fancy ",
    "face": "Times New Roman",
    "size": 14,
    "bold": true
}
myArr[4] = {
    "text": "fancy ",
    "face": "Times New Roman",
    "size": 14,
    "bold": true
}
myArr[5] = {
    "text": "very fancy",
    "face": "Times New Roman",
    "size": 14,
    "italic": true,
    "bold": true
}
myArr[6] = {
    "text": " however ",
    "face": "Times New Roman",
    "size": 14
}
myArr[6] = {
    "text": " I'm ok "
}
myArr[7] = {
    "text": "with",
    "underline": true
}
myArr[8] = {
    "text": " it."
}

Я пытался структурировать его как рекурсивную функцию, но я не уверен, как сделать его полностью функциональным..

function myParse(str, arr) {

    if(!arr) arr = [];

    var regex = /<font(.+?)>(.+?)<\/font>|<i>(.+?)<\/i>|<b>(.+?)<\/b>|<u>(.+?)<\/u>/g;
    var match = regex.exec(str);
    while (match != null) {
        for (var i = 0; i < match.length; i++) {

            // this way i can identify with matches:
            // match[1] - font specifics
            // match[2] - font tag content
            // match[3] - italic tag content
            // match[4] - bold tag content
            // match[5] - underline tag content

            var temp_object = {};

            var temp_object.text = matched_text;
            // process here a second regex to obtain font name and size.. like:
            var regex = /face="(.+?)"|size="(.+?)"/g;
            ...
            var temp_object.italic = match[3] ? true : false;
            var temp_object.bold = match[4] ? true : false;
            var temp_object.underline = match[5] ? true : false;

            // at some point i'm pretty sure that i have to..
            // put a marker let's say a
            var marker = Math.floor(Math.random() * 5000).toString();
            str.replace(matched_text, marker)

            // then recurse the parse(str, arr)  
        }
        match = regex.exec(str);
    }

}