Question

I have some text in a var. var text = " Hell O " . each character of the text is wrapped in span tag , given an id and then appended to innerhtml of a p tag. Then with a function each span is styled (on an event).

Problem is that any spaces at the beginning or end of the p tag are not getting highlighted. I am not sure whether the p tag is ignoring the spaces and not including them in the final para . But it does seem that the first/last spaces are not being included.

This is my styling function btw.

function highlightLetter(typedletter) {
        var targetId = "h"+( typedletter );
        makeGreen = document.getElementById(targetId) ;
        if (makeGreen) {
            console.log(makeGreen.innerText.charCodeAt(0)) ;
            if (makeGreen.innerText.indexOf(String.fromCharCode(10)) == -1 ) {
                makeGreen.style.background  = "lightgreen" ;
            }

        }
    }

Any ideas ?

Thanks

Answer 1

Whitespace at the beginning and end of a paragraph isn’t rendered. Also, sequences of whitespace within the paragraph are collapsed.

If you want all your whitespace to be rendered use non-breaking space entity . Note that this will affect line breaking and may induce horizontal scroll where lines would otherwise be wrapped.

You can replace all ordinary whitespace characters with non-breaking space like this:

var text = " Hell O ";
text.replace(/ /g, " ");

Alternatively, you can also use <pre>...</pre> tags.