Javascript 在不应该删除空格的情况下删除空格？答案

【问题标题】：Javascript Removing Whitespace When It Shouldn't?Javascript 在不应该删除空格的情况下删除空格？
【发布时间】：2010-09-17 20:23:37
【问题描述】：

我有一个 HTML 文件，其代码类似于以下内容。

<table>
    <tr>
    <td id="MyCell">Hello  World</td>
    </tr>
</table>

我正在使用类似下面的 javascript 来获取值

document.getElementById(cell2.Element.id).innerText

这将返回文本“Hello World”，在 hello 和 world 之间只有 1 个空格。我必须保留相同数量的空格，有什么办法可以做到吗？

我尝试过使用 innerHTML、outerHTML 和类似的项目，但我没有运气。

【问题讨论】：

标签： javascript dom whitespace innerhtml

【解决方案1】：

HTML 对空格不敏感，这意味着您的 DOM 也是。将您的“Hello World”包装在 pre 块中是否可行？

【讨论】：

实际情况是使用数据网格，好吧，我不认为我可以做到这一点。但是您在 DOM 规则上是 100% 正确的。我只是希望有一种黑客攻击..

【解决方案2】：

在 HTML 中，任何大于 1 的空格都会被忽略，无论是显示文本还是通过 DOM 检索文本。保持空间的唯一保证方法是使用不间断空间&nbsp;。

【讨论】：

【解决方案3】：

提示一下，innerText 仅适用于 Internet Explorer，而 innerHTML 适用于所有浏览器...所以，请使用 innerHTML 而不是 innerText

【讨论】：

感谢您的提示！我们在这里使用 IE6，并且会使用一段时间，但很高兴知道这一点。无论如何，我要重新编写代码，这足以向 mgmt 证明代码不安全！我讨厌遗留代码...
现在已经不是这样了——我建议检查哪个存在并使用存在的那个

【解决方案4】：

CSS 中的pre 标记或white-space: pre 会将所有空格视为有意义的。但是，这也会将换行符变成换行符，所以要小心。

【讨论】：

【解决方案5】：

刚刚检查了一下，看起来应该用 pre 标签包装。

【讨论】：

【解决方案6】：

编辑：我错了，别理我。

您可以获得文本节点的 nodeValue，它应该正确地表示其空白。

这是一个递归获取给定元素中文本的函数（它是库安全的，如果您使用修改 Array.prototype 或其他内容的东西不会失败）：

var textValue = function(element) {
    if(!element.hasOwnProperty('childNodes')) {
        return '';
    }
    var childNodes = element.childNodes, text = '', childNode;
    for(var i in childNodes) {
        if(childNodes.hasOwnProperty(i)) {
            childNode = childNodes[i];
            if(childNode.nodeType == 3) {
                text += childNode.nodeValue;
            } else {
                text += textValue(childNode);
            }
        }
    }
    return text;
};

【讨论】：

我在写答案的时候也是这么想的。它仍然剥夺了 IE 7 中的空间。
nodeValue 仍然是比 innerHTML 更好的选择，因为它将

【解决方案7】：

这里只是一个意见，而不是规范的建议，但是如果您尝试使用内部/外部 HTML/TEXT 从 DOM 中提取 exact 文本值，您将走向世界或受到伤害通过 Javascript 的属性。根据浏览器“查看”内部文档的方式，不同的浏览器会返回略微不同的值。

如果可以，我会更改您正在呈现的 HTML 以包含隐藏输入，例如

<table>
    <tr>
    <td id="MyCell">Hello  World<input id="MyCell_VALUE" type="hidden" value="Hello  World" /></td>
    </tr>
</table>

然后在 javascript 中获取您的价值，例如

document.getElementById(cell2.Element.id+'_VALUE').value

输入标签旨在保存值，您将不太可能遇到保真度问题。

另外，听起来您正在使用某种 .NET 控件。可能值得查看文档 (ha) 或提出一个稍微不同的问题，以查看该控件是否提供某种官方客户端 API。

【讨论】：

哦，我知道这有多糟糕，我只是想看看是否有一种快速的破解方法来解决它。该控件是一个旧的 ASP.NET 1.1 控件，开发人员甚至不再支持它。我继承的整个遗留代码都是垃圾……我要以正确的方式重写它……

【解决方案8】：

这有点hacky，但它适用于我的IE。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <title></title>
</head>
<body>
<div id="a">a  b</div>
<script>
var a = document.getElementById("a");
a.style.whiteSpace = "pre"
window.onload = function() {
    alert(a.firstChild.nodeValue.length) // should show 4
}
</script>
</body>
</html>

一些注意事项：

您必须有一个文档类型。
您无法在 window.onload 触发之前查询 DOM 元素
您应该使用 element.nodeValue 而不是 innerHTML 等，以避免当文本包含诸如 & "
由于我认为这是一个丑陋的错误，一旦 IE 完成页面渲染，您就无法重置空白

【讨论】：

【解决方案9】：

如果有人可以正确格式化我的上一篇文章，它看起来会更易读。对不起，我把那个搞砸了。基本上，诀窍是创建一个一次性的 pre 元素，然后将节点的副本附加到该元素。然后你可以根据浏览器获取innerText或textContent。

除了 IE 之外的所有浏览器基本上都正确地完成了显而易见的事情。 IE 需要这种 hack，因为它只在 pre 元素中保留空白，并且仅在您访问 innerText 时才保留。

【讨论】：

【解决方案10】：

以下技巧在 IE 中保留了 innerText 中的空白

var cloned = element.cloneNode(true);
var pre = document.createElement("pre");
pre.appendChild(cloned);
var textContent = pre.textContent
  ? pre.textContent
  : pre.innerText;
delete pre;
delete cloned;

【讨论】：