how to deal with the innerHTML of pre in IE678,where is the indentation?

Question

who can tell me how to deal with the innerHTML of pre in IE678 ? I know to use br, but how to do with the indentation?

My HTML:

<div id="box">
    <pre id="code">

       var a = "before";
       function b(){
           alert(a);
       }

    </pre>
</div>

My JS:

<script>
    var pre = document.getElementById("code");
    var str = pre.innerHTML;
    var newstr = str.replace("before", "after").replace(/\n/ig, "<br />");
    pre.innerHTML = newstr;
</script>

Right result in page:

var a = "after";
function b(){
    alert(a);    //note the indentation before alert 
}

Error result in page of IE678:

var a = "after"; 
function b(){ 
alert(a);        //indentation is disappeared......
}

formatting code in html pages is not that easy. Maybe have a look at this http://stackoverflow.com/questions/1270221/how-to-format-code-in-html-css-js-php they mention prettyprit javascript library for this. Note that I've opened the pre tag in IE8 and ident works without having to add br. — HMR, Dec 24 '12 at 02:29

score 0 · Accepted Answer · answered Dec 24 '12 at 02:44

0

Sorry, didn't see you changing the text of the pre with JavaScript that messes it up. Here is what you can do:

    var pre = document.getElementById("code");
    var str = (pre.innerText) ? pre.innerText : pre.textContent;
    var newstr = str.replace("before", "after");//.replace(/\n/ig, "<br />");
    if(pre.textContent){pre.textContent = newstr};
    if(pre.innerText){pre.innerText = newstr};

answered Dec 24 '12 at 02:44

HMR

37,593
24
91
160

var newstr = str.replace("before", "before"); Do like that,your code is out of work – xiaomo Dec 24 '12 at 03:42
Like I said in my first reply; if you want to make it complicated use a javascript library. Who is the say the html markup inside the string should be rendered as html or text? When is it text and when is it html? – HMR Dec 24 '12 at 03:50
Now what I should do? If I want to show right format which contain html tags in IE678? – xiaomo Dec 24 '12 at 04:21
Not sure if this will help: http://code.google.com/p/google-code-prettify/ How will you know that markup needs to be rendered or not? For example would you like to render or display it as text in the following example: var a="{%1}"; – HMR Dec 24 '12 at 04:28

how to deal with the innerHTML of pre in IE678,where is the indentation?

1 Answers1