Simple algorithm to wrap each word of the inner text of Tag in other tag.

I had a need to wrap each word of inner text of a tag with other tag, in order to fire a event on hovering of each word.

e.g. : “<p> I am good </p>” have to be converted to “<p> <span>I</span> <span>am</span> <span>good</span> </p>”

Use the following to achieve this. Please note that it does not considers the ill formatted HTML.

$('p, .mlw_qmn_new_question, label, td, .opt, .single-title').each(function() {
            var $this = $(this);
		    var innerHTML = $this[0].innerHTML;
		    var innerHTMLArr = innerHTML;
		    var newInnerHTML = "";
		    for (var i =0;i < innerHTMLArr.length;) {
				if (innerHTMLArr[i] == " ") {
					while(i < innerHTMLArr.length && innerHTMLArr[i] == " ") {
						newInnerHTML+=innerHTMLArr[i];
						i++;
					}
				}
				if (i >= innerHTMLArr.length) {
					i++;
					continue;
				}
				if (innerHTMLArr[i] == "<") {
					newInnerHTML+=innerHTMLArr[i];
					i++;
					while(i < innerHTMLArr.length && innerHTMLArr[i] == " ") {
						newInnerHTML+=innerHTMLArr[i];
						i++;
					}
					if (i >= innerHTMLArr.length) {
						i++;
						continue;
					}
					if (innerHTMLArr[i] == "/") {
						newInnerHTML+=innerHTMLArr[i];
						i++;
						while(i < innerHTMLArr.length && innerHTMLArr[i] != ">") {
							newInnerHTML+=innerHTMLArr[i];
							i++;
						}
						newInnerHTML+=">";
						i++;
					} else {
						while(i < innerHTMLArr.length && innerHTMLArr[i] != ">") {
							newInnerHTML+=innerHTMLArr[i];
							i++;
						}
						newInnerHTML+=">";
						i++;
					}
					continue;
				}
				newInnerHTML+="<span>";
				while(i < innerHTMLArr.length && innerHTMLArr[i] !== " " && innerHTMLArr[i] !== "<") {
					newInnerHTML+=innerHTMLArr[i];
					i++;
				}
				newInnerHTML+="</span>";
			}
            $this.html(newInnerHTML);
     });