Javascript在不应该删除空格时删除空格

Javascript Removing Whitespace When It Shouldn't?

本文关键字:删除 空格 不应该 Javascript      更新时间:2023-09-26

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

HTML是空白不敏感的,这意味着你的DOM也是。 将您的"Hello World"包装在块中会起作用吗?

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

只是一个提示,innerText 仅适用于 Internet Explorer,而 innerHTML 适用于每个浏览器......所以,使用innerHTML而不是innerText

CSS

中的 pre 标记或white-space: pre会将所有空格视为有意义的。但是,这也会将换行符转换为换行符,因此请小心。

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

如果可以的话,我会更改您正在渲染的 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。

刚刚检查了它,看起来用 pre 标签包装应该可以做到。

编辑:我错了,不要理我。

您可以获取文本节点的 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。

<!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完成渲染页面,您将无法重置空格,因为我认为这是一个丑陋的错误

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

除IE之外的所有浏览器基本上都正确地完成了显而易见的事情。 IE需要这个技巧,因为它只保留pre元素中的空格,并且只有在你访问innerText时。

以下技巧保留了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;