Question

我有一个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和类似项目，但我没有运气。

Answer 1

HTML是白色空间不敏感的，这意味着您的DOM也是如此。将你的“Hello World”包装在 pre 块中会不会起作用？

Answer 2

在HTML中，任何空格＆gt; 1都会被忽略，包括显示文本和通过DOM检索文本。保持空间的唯一保证方式是使用不间断的空间 。

Answer 3

只是一个提示，innerText仅适用于Internet Explorer，而innerHTML适用于所有浏览器...因此，使用innerHTML而不是innerText

Answer 4

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

Answer 5

刚检查过它，看起来好像用 pre 标签包装一样。

Answer 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;
};

Answer 7

这里只是一个意见，而不是规范性建议，但如果您尝试使用内部/外部HTML / TEXT从DOM中提取完全文本值，那么您将走向世界或受到伤害通过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。

Answer 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>

一些注意事项：

您必须拥有doctype。
在window.onload触发之前无法查询DOM元素
你应该使用element.nodeValue而不是innerHTML等来避免文本包含像＆lt; ＆GT; ＆安培; “
由于我认为是一个丑陋的bug，IE完成呈现页面后无法重置whiteSpace

Answer 9

以下技巧在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;

Answer 10

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

除了IE之外的所有浏览器基本上都是正确的。 IE需要这个hack，因为它只保留pre元素中的空格，并且只有当你访问innerText时才会这样。

Javascript删除空格时不应该？

10 个答案: