可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I have a HTML file that has code similar to the following.

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

I am using javascript like the following to get the value

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

This returns the text "Hello World" with only 1 space between hello and world. I MUST keep the same number of spaces, is there any way for that to be done?

I've tried using innerHTML, outerHTML and similar items, but I'm having no luck.

回答1:

HTML is white space insensititive which means your DOM is too. Would wrapping your "Hello World" in pre block work at all?

回答2:

In HTML,any spaces >1 are ignored, both in displaying text and in retrieving it via the DOM. The only guaranteed way to maintain spaces it to use a non-breaking space  .

回答3:

Just a tip, innerText only works in Internet Explorer, while innerHTML works in every browser... so, use innerHTML instead of innerText

回答4:

The pre tag or white-space: pre in your CSS will treat all spaces as meaningful. This will also, however, turn newlines into line breaks, so be careful.

回答5:

Just checked it and it looks like wrapping with the pre tag should do it.

回答6:

Edit: I am wrong, ignore me.

You can get a text node's nodeValue, which should correctly represent its whitespace.

Here is a function to recursively get the text within a given element (and it's library-safe, won't fail if you use something that modifies Array.prototype or whatever):

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

回答7:

Just an opinion here and not canonical advice, but you're headed for a world or hurt if you're trying to extract exact text values from the DOM using the inner/outer HTML/TEXT properties via Javascript. Different browsers are going to return slightly different values, based on how the browser "sees" the internal document.

If you can, I'd change the HTML you're rendering to include a hidden input, something like

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

And then grab your value in javascript something like

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

The input tags were designed to hold values, and you'll be less likely to run into fidelity issues.

Also, it sounds like you're using a .NET control of some kind. It might be worth looking through the documentation (ha) or asking a slightly different question to see if the control offers an official client-side API of some kind.

回答8:

This is a bit hacky, but it works on my 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>

Some notes:

You must have a doctype.
You cannot query the DOM element before window.onload has fired
You should use element.nodeValue instead of innerHTML et al to avoid bugs when the text contains things like < > & "
You cannot reset whiteSpace once IE finishes rendering the page due to what I assume is an ugly bug

回答9:

If someone could format my last post correctly it would look more readable. Sorry, I messed that one up. Basically the trick is create create a throwaway pre element, then append a copy of your node to that. Then you can get innerText or textContent depending on the browser.

All browsers except IE basically do the obvious thing correctly. IE requires this hack since it only preserves white-space in pre elements, and only when you access innerText.

回答10:

This following trick preserves white-space in innerText in IE

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;