Изменение строки на дату с помощью innerHTML/textContent/innerText не работает в Safari/IE/FF

У меня есть javascript, который изменяет строку чисел в таблице до более красивого формата даты с/в между месячным месяцем и день. До сих пор я был успешным только в Chrome, и я пытался манипулировать им, используя innerHTML, innerText и contentText, все отлично работает в Chrome, но никаких других браузеров.Изменение строки на дату с помощью innerHTML/textContent/innerText не работает в Safari/IE/FF

My Javascript выглядит следующим образом:

window.onload = function() 
{ 
var formatForDate = function(element) { 
var originalText = element.innerHTML; 
var year = originalText.substring(0,4); 
var month = originalText.substring(4,6); 
var day = originalText.substring(6,9); 
element.innerHTML = [day, month, year].join('/'); 

formatForDate(document.querySelector('#\\31 3113')); 

}

А вот HTML Я пытаюсь манипулировать:

<table> 
<tbody> 
<tr><td>Something</td><td>Something</td></tr> 
<tr><td>Something</td><td><span id='13113'>20150924</span></td> 
</tbody> 
</table>

Пожалуйста, помогите! Я могу использовать только javascript для решения этой проблемы, к сожалению, нет jQuery.

источник

2015-09-24 teedubya

Первый Предлагаю изменить атрибут 'id', чтобы начать с буквы. [A-Za-Z]. Таким образом, это уже должно быть более совместимым, и я предлагаю прочитать здесь: valid id value.

Второй Я сделал несколько изменений в коде

Я закрыл реализацию formatForDate (что вы пропустили).
Я добавил закрывающий тег для второй строки таблицы (которую вы также пропустили)
Я удалил ненужные слова «var».

Третий Поскольку вам нужно текстовое содержание из диапазона, вы должны использовать Node.textContent вместо .innerHTML

Вот рабочий пример:

window.onload = function(){ 
 
\t \t \t var formatForDate = function(element) { 
 
\t \t \t \t var originalText = element.textContent, 
 
\t \t \t \t \t year = originalText.substring(0,4), 
 
\t \t \t \t \t month = originalText.substring(4,6), 
 
\t \t \t \t \t day = originalText.substring(6,9); 
 
\t \t \t \t element.textContent = [day, month, year].join('/'); 
 
\t \t \t } 
 
\t \t \t \t formatForDate(document.querySelector('#a')); 
 
\t \t }

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <script src="yourFile.js"></script> 
 
</head> 
 
<body> 
 
\t <table> 
 
\t \t <tbody> 
 
\t \t \t <tr> 
 
\t \t \t \t <td>Something</td> 
 
\t \t \t \t <td>Something</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td>Something</td> 
 
\t \t \t \t <td><span id='a'>20150924</span></td> 
 
\t \t \t </tr> 
 
\t \t </tbody> 
 
\t </table> 
 
</body> 
 
</html>

Проверено в: Chrome, FF и IE9-11

EDIT В ответ на ваш комментарий Хорошо, так как вы не можете изменить идентификатор, и он должен оставаться числовым. Вы можете использовать метод document.getElementById непосредственно с числовым идентификатором (не нужно бежать). Я проверил его в Chrome, FF и даже IE9 вот пример:

onload = function(){ 
      console.log(document.getElementById("13113").textContent); 
     }//Checked in Chrome, FF, IE9+

источник

2015-09-24 21:10:26

Спасибо за это, был немного пьян, когда набирал вопрос, так что пропустил пару тегов. Удаленные ненужные vars, я уже пробовал textContent (я почему-то написал ContentText в моем вопросе ..). Ваш код работает нормально, пока я не попытаюсь использовать идентификатор, который является числом. Я хотел бы иметь возможность изменять ID, но, к сожалению, я не могу получить доступ к HTML. Итак, идентификатор номера кажется проблемой, и экранирование символов, похоже, не работает? – teedubya

Пошел, я добавил для этого ответ. –

Прежде всего, с помощью document.querySelector собирается автоматически ограничивает вас на некоторых из браузеров, которые вы можете использовать. См. CanIUse. Поскольку вы только что-то захватываете по своему id, почему бы просто не использовать document.getElementById? Он имеет поддержку почти во всех браузерах.

function formatForDate(id) { 
    var el = document.getElementById(id); 
    var dateStr = el.innerHTML.trim(); 
    var year = dateStr.substr(0,4); 
    var month = dateStr.substr(4,2); 
    var day = dateStr.substr(6,2); 
    el.innerHTML = day + '/' + month + '/' + year; 
} 

formatForDate('a13113');

js fiddle here.Испытано в Firefox, Chrome и IE 9

Некоторые вещи, чтобы отметить:

идентификаторы на HTML элемент должен не начинаться с цифры. Here - очень хорошее объяснение того, что следует использовать.
Если ваша строка даты никогда не была проиндексирована 0 (то есть 09 появляется вместо 9), у вас будет плохое время.
внутреннийHTML не просто захватывает текст, он также захватывает ... HTML. Если бы у вашего TD когда-либо было больше html внутри него, вы снова будете несчастны.

источник

2015-09-24 21:24:16

Приветствия за это, досадно, я не могу контролировать тот факт, что ID - это номер, и, похоже, это может быть проблемой. Использование getElementByID было бы хорошо для этого решения, хотя я заметил, что если я попытаюсь избежать символов на «formatfordate» (# 31 3113), он не сможет найти идентификатор, и если я просто поставлю number in formatfordate (который, как я понимаю, не рекомендуется вообще), то он работает в Chrome, но никаких других браузеров. – teedubya

Изменение строки на дату с помощью innerHTML/textContent/innerText не работает в Safari/IE/FF

ответ

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