How to move the cursor to a specific word in a textarea?

the text box has the following lines,

hello world. <h2>sub heading</h2>
<img src="" alt="image.jpg"><h3>Test</h3>
More text
<img src="" alt="">

      

        
        
        
      

    

I want to be able to click on a button that will move the cursor to the alt attribute, which is empty. if there is an "h" label, then they are in the correct order. (there must be an h1 tag first, then an h2 tag). if they are not in order, move the cursor to the next "h" tag (in this example, move the cursor to the h2 tag). at the end, the cursor will move to the last alt attribute. then if I click the button again, the cursor moves to the "h2" tag again. I have the following code,

<script type = "text/javascript">            
      (function ($, undefined) {
 $.fn.getCursorPosition = function() {
    var el = $(this).get(0);
    var pos = 0;
    if('selectionStart' in el) {
        pos = el.selectionStart;
    } else if('selection' in document) {
        el.focus();
        var Sel = document.selection.createRange();
        var SelLength = document.selection.createRange().text.length;
        Sel.moveStart('character', -el.value.length);
        pos = Sel.text.length - SelLength;
    }
    return pos;
  }
})(jQuery);

function setSelectionRange(input, selectionStart, selectionEnd) {
if (input.setSelectionRange) {
input.focus();
input.setSelectionRange(selectionStart, selectionEnd);
}
else if (input.createTextRange) {
var range = input.createTextRange();
range.collapse(true);
range.moveEnd('character', selectionEnd);
range.moveStart('character', selectionStart);
range.select();
}
 else if(input.createTextRange){
 var range = elt.createTextRange();
 range.move('character', pos);
  range.select(); 
 }
 }

 function setCaretToPos (input, pos) {
 setSelectionRange(input, pos, pos);
 }

 function nextAlt(input) {
 var current = input.getCursorPosition();
 var search = input.val().substr( ( 0 == current ? 0 : current + 1 ) );
 var pos = current + search.search(/<[a-zA-Z]+(>|.*?[^?]>)/) + 1;
 if (-1 == pos) {
    alert("No elements found");
 } else {
    setCaretToPos(input.get(0), pos);
 }
 }
    </script>

      

        
        
        
      

    

inside textbox and button:

 <textarea id="textarea">
 hello world. <h2>sub heading</h2>
 <img src="" alt="image.jpg"><h3>Test</h3>
 More text
 <img src="" alt="">
 </textarea>
 <br>
 <a onclick="nextAlt($('#textarea'));">Next</a>

      

        
        
        
      

    

The codes above do not work in IE (cross browser required). it moves the cursor to different tags, but I want to use a different condition before placing the curosor at a specific location. for example, I want to check the order of the title tag. if h2 and h3 are used then it should check the h1 tag and move the cursor to the h2 tag. then if the user clicks the button again, it will navigate to the alt = "" attribute (missing alt text) and not to the h3 tag, because the order of the heading tag is in order after h2. when it reaches the end, if the user clicks the button again, the cursor will return to the "h2" tag again. can someone please help me with this. thank