2008-10-17 6 views
5

У меня есть файл HTML, который имеет код, похожий на следующий.Javascript Удаление пробелов, когда это не должно быть?

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

Я использую JavaScript, как следующее, чтобы получить значение

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

Это возвращает текст "Hello World" только 1 пространство между приветом и миром. Я ДОЛЖЕН сохранить такое же количество пробелов, есть ли способ сделать это?

Я пробовал использовать innerHTML, внешнийHTML и аналогичные элементы, но мне не повезло.

ответ

9

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

+0

Фактическая ситуация использует datagrid, и я не думаю, что могу заставить ее это сделать. Но вы на 100% правильны в правилах DOM. Я просто надеялся на что-то вроде взлома .. – 2008-10-17 21:09:41

7

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

+0

Также хорошее решение ... – Nick 2008-10-17 21:12:13

0

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

3

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

+0

Спасибо за подсказку! Мы здесь на IE6 и будем на некоторое время, но это хорошо знать. Несмотря ни на что, я получаю, чтобы переписать код, этого было достаточно, чтобы оправдать mgmt, что код был небезопасным! Я ненавижу устаревший код ... – 2008-10-17 21:33:03

+0

Это уже не так - я предлагаю проверить, что существует, и использовать тот, который делает – slifty 2011-07-26 06:13:19

2

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

+0

Слишком плохо IE 7 швов, чтобы разбить это ... – Rontologist 2008-10-17 21:46:30

0

Редактировать: Я ошибаюсь, игнорирую меня.

Вы можете получить узел 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

Я тоже думал об этом, когда собирался писать мой ответ. Он по-прежнему разделил пространство в IE 7. – Rontologist 2008-10-17 21:44:42

0

Просто мнение здесь, а не канонические советы, но вы направляетесь в мир или больно, если пытаетесь извлечь точные текстовые значения из 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 

The теги ввода были предназначены для хранения значений, и вы вряд ли столкнетесь с проблемами верности.

Кроме того, похоже, что вы используете какой-либо элемент управления .NET. Возможно, стоит просмотреть документацию (га) или задать несколько другой вопрос, чтобы узнать, предлагает ли контроль официальный API-интерфейс клиентской стороны.

0

Это немного хакерский, но он работает на моем 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 и др, чтобы избежать ошибок, когда текст содержит такие вещи, как <> & "
  • Вы не можете сбросить пробельные разы IE завершает обработку страницы из-за того, что я предполагаю, что это уродливая ошибка
0

Это следующий трюк сохраняет пробельные в 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

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

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

 Смежные вопросы

  • Нет связанных вопросов^_^