innerText shim for Firefox

Question

in google chrome innerText seems to return the text of the element that the user see which is exactly what i need.
so i need a shim of innerText for Firefox.

for example:
<div id='1'><br> f<div style='display:none'>no</div>oo   bar</div>
<script> function test(){ return document.getElementById('1').innerText } </script>

the function test would return "\n foo   bar"


ultimate goal is to make a text editable area where links are clickable and where tags are highlighted and where the linking and highlighting is created on the fly while typing.
my approach here is:
on every keyup:
- save the cursor position
- cut the text with innerText
- parse the links and tags of the text returned by innerText
- paste the parsed text into the editable area
- restore the cursor position

any idea for a firefox innerText shim?

thanks!

Answer 1

You can use the toString() method of the Selection object in Firefox, which acts a lot like innerText. Since you're already saving the cursor position before extracting innerText in your example, the following does not bother to save and restore the selection, but otherwise you should be doing that.

function getInnerText(el) {
    var text = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        sel.removeAllRanges();
        var range = document.createRange();
        range.selectNodeContents(el);
        sel.addRange(range);
        text = sel.toString();
        sel.removeAllRanges();
    }
    return text;
}

Answer 2

Try textContent instead of innerText in Firefox.

       <div id='1'><br> f<div style='display:none'>no</div>oo   bar</div>
        <script> 
            function test(){ 
            return document.getElementById('1').innerText || document.getElementById('1').textContent;
            } 
        </script>