Moving caret in the contents of a read-only div allowing for dynamic highlighting

http://stackoverflow.com/questions/26913615/moving-caret-in-the-contents-of-a-read-only-div-allowing-for-dynamic-highlightin?noredirect=1#comment42376695_26913615

HTML

<!-- Current Implementation -->
<div id="diff-content">
    <b>Some Header Text</b>
    <br>
        <span>More text</span>
    <br>
    <a href='http://www.google.com' target='_blank'>A link</a>

</div>
<br>
<!-- Why input doesn't work -->
<input id='diff-input' value="This works in firefox
    <br>
    but not chrome 
    <br>
    <b>also it doesn't render html</b>
    <br>
    <a href='http://www.google.com' target='_blank'>A link</a>" readonly/>
    <br>
    <br>
<!-- Why textarea doesn't work -->
<textarea rows='12' cols='35' id='diff-textarea' readonly>
<b>This works in firefox</b>
<br>
but not chrome 
<br>
<b>also it doesn't render html</b>
<br>
<a href='http://www.google.com' target='_blank'>A link</a>
</textarea>






















































































































































































<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-23915674-6']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();


var headerUri = 'http://stackoverflow.com/q/8956567/918414',
headerCaption = 'How do I make an editable DIV look like a text field?';
document.body.insertAdjacentHTML( 
'afterBegin',
'<a href="' + headerUri + '" '
+ 'target="_top" '
+ 'onmouseover="this.style.opacity=\'.95\'" '
+ 'onmouseout="this.style.opacity=\'1\'" '
+ 'style="'
+ 'background-color: black;'
+ 'background-image: linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0)...