Javascript Удаление пробелов, когда это не должно? - PullRequest
Новая
       20

Javascript Удаление пробелов, когда это не должно?

6 голосов
/ 18 октября 2008

У меня есть HTML-файл с кодом, подобным следующему. 

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

Я использую javascript, как показано ниже, чтобы получить значение 

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

Возвращает текст «Hello World» с пробелом всего 1 между hello и world. Я ДОЛЖЕН оставить одинаковое количество пробелов, есть ли способ сделать это?

Я пытался использовать innerHTML, outerHTML и подобные предметы, но мне не повезло.

Ответы [ 10 ]

9 голосов
/ 18 октября 2008

HTML нечувствителен к пробелам, что означает, что ваш DOM тоже. Будет ли вообще работать ваш Hello World в блоке pre ?

7 голосов
/ 18 октября 2008

В HTML любые пробелы> 1 игнорируются как при отображении текста, так и при получении его через DOM. Единственный гарантированный способ сохранить пробелы это использовать неразрывный пробел &nbsp;.

3 голосов
/ 18 октября 2008

Просто подсказка, innerText работает только в Internet Explorer, в то время как innerHTML работает в любом браузере ... так что используйте innerHTML вместо innerText

2 голосов
/ 18 октября 2008

Тег pre или white-space: pre в вашем CSS будет рассматривать все пробелы как значимые. Однако это также превратит переводы строки в разрывы строк, поэтому будьте осторожны.

0 голосов
/ 14 января 2009

Если бы кто-то мог правильно отформатировать мой последний пост, он выглядел бы более читабельным. Извините, я все испортил. По сути, трюк заключается в том, чтобы создать элемент «Создать», а затем добавить к нему копию вашего узла. Затем вы можете получить innerText или textContent в зависимости от браузера.

Все браузеры, кроме IE, в основном правильно делают очевидное. IE требует этого взлома, поскольку он сохраняет только пробелы в элементах pre и только при доступе к innerText.

0 голосов
/ 14 января 2009

Этот следующий трюк сохраняет пробел во innerText в 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;
0 голосов
/ 18 октября 2008

Это немного глупо, но работает на моем 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>

Некоторые заметки:

  • У вас должен быть тип документа.
  • Вы не можете запросить элемент DOM до запуска window.onload
  • Вы должны использовать element.nodeValue вместо innerHTML и др., Чтобы избежать ошибок, когда текст содержит такие вещи, как <> & "
  • Вы не можете сбросить whiteSpace после того, как IE закончит рендеринг страницы из-за того, что я считаю ужасной ошибкой
0 голосов
/ 18 октября 2008

Здесь просто мнение, а не канонический совет, но вы стремитесь к миру или беде, если пытаетесь извлечь точные текстовые значения из DOM, используя внутренние / внешние свойства HTML / TEXT с помощью 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. Возможно, стоит посмотреть документацию (ха) или задать немного другой вопрос, чтобы проверить, предлагает ли элемент управления какой-либо официальный клиентский API.

0 голосов
/ 18 октября 2008

Редактировать: я не прав, игнорируй меня.

Вы можете получить 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;
};
0 голосов
/ 18 октября 2008

Только что проверил, и похоже, что обертка с тегом pre должна сделать это.

...