禁用<p>标记</p>自动修剪文本

Question

我在var中有一些文字。 var text = " Hell O "。文本的每个字符都包含在span标记中，给定一个id，然后附加到p标记的innerhtml。然后使用函数为每个范围设置样式（在事件上）。

问题是p标签开头或结尾的任何空格都没有突出显示。我不确定p标签是否忽略空格并且不包括它们在最后的段落中。但似乎没有包括第一个/最后一个空格。

这是我的造型功能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" ;
            }

        }
    }

有什么想法吗？

由于

Answer 1

不会呈现段落开头和结尾的空格。此外，段落中的空格序列也会折叠。

如果您希望渲染所有空格，请使用non-breaking space实体 。请注意，这会影响换行，并可能导致水平滚动，否则会换行。

您可以使用不间断的空格替换所有普通的空白字符，如下所示：

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

或者，您也可以使用<pre>...</pre>代码。