У меня есть код JavaScript, который работает в IE, содержащий следующее:
myElement.innerText = "foo";
Однако, похоже, что свойство innerText не работает в Firefox. Есть ли какой-то эквивалент Firefox? Или существует более общее свойство кросс-браузера, которое можно использовать?
Firefox использует совместимый с W3C textContent свойство.
Я бы предположил, что Safari и Opera также поддерживают это свойство.
Обновление: я написал сообщение textContent, но не innerText из текстовых узлов:
var el = document.createElement('p');
var textNode = document.createTextNode('x');
el.textContent; // ""
el.innerText; // ""
textNode.textContent; // "x"
textNode.innerText; // undefined
Наконец, Safari 2.x также имеет функцию buggy innerText. В Safari innerText работает правильно, только если элемент
ни скрытым (через style.display == "none"), ни сиротой из документа. В противном случае innerText приводит к пустой строке.
Я играл с абстракцией textContent (чтобы обойти эти недостатки), но оказалось довольно сложным.
Лучше всего выбрать сначала определить свои точные требования и следовать оттуда. Часто можно просто снять метки с innerHTML элемента, а не обрабатывать все возможные отклонения textContent/innerText.
Другая возможность, конечно же, состоит в том, чтобы пройти дерево DOM и рекурсивно собирать текстовые узлы.
Если вам нужно только установить текстовое содержимое и не извлекать, вот тривиальная версия DOM, которую вы можете использовать в любом браузере; он не требует ни расширения внутреннего тэга IE, ни свойства TextContent основного уровня DOM уровня 3.
function setTextContent(element, text) {
while (element.firstChild!==null)
element.removeChild(element.firstChild); // remove all existing content
element.appendChild(document.createTextNode(text));
}
jQuery предоставляет метод .text() которые могут использоваться в любом браузере. Например:
$('#myElement').text("Foo");
Как утверждает Prakash K, Firefox не поддерживает свойство innerText. Таким образом, вы можете просто проверить, поддерживает ли пользовательский агент это свойство, и действуйте следующим образом:
function changeText(elem, changeVal) {
if (typeof elem.textContent !== "undefined") {
elem.textContent = changeVal;
} else {
elem.innerText = changeVal;
}
}
На самом деле простая строка Javascript может получить "не-taggy" текст во всех основных браузерах...
var myElement = document.getElementById('anyElementId');
var myText = (myElement.innerText || myElement.textContent);
Обратите внимание, что свойство Element::innerText будет не содержать текст, который был скрыт стилем CSS display:none "в Google Chrome (также он удалит содержимое, которое было замаскировано другие CSS-технологии (включая размер шрифта: 0, цвет: прозрачный и несколько других аналогичных эффектов, которые не позволяют визуализировать текст каким-либо видимым образом).
Также рассматриваются другие свойства CSS:
<br \>, который генерирует встроенную новую строку, также генерирует новую строку в значении innerText.Но Element::textContent по-прежнему будет содержать ВСЕ содержимое внутренних текстовых элементов независимо от применяемого CSS, даже если они невидимы. И никакие дополнительные строки или пробелы не будут генерироваться в textContent, который просто игнорирует все стили и структуры и встроенные/блокированные или расположенные типы внутренних элементов.
Операция копирования/вставки с использованием мыши будет отбрасывать скрытый текст в текстовом формате, который помещается в буфер обмена, поэтому он не будет содержать все в textContent, но только то, что находится внутри innerText (после генерации пробелов/новых строк, как указано выше).
Оба свойства затем поддерживаются в Google Chrome, но их содержимое может быть иным. Старые браузеры по-прежнему включены в innetText все, что теперь содержит текст (но их поведение по отношению к потомству пробелов/строк новой строки было непоследовательным).
jQuery разрешит эти несоответствия между браузерами, используя метод ".text()", добавленный к анализируемым элементам, которые он возвращает через запрос $(). Внутри он решает проблемы, просматривая HTML DOM, работая только с уровнем "node". Поэтому он вернет нечто похожее на стандартный textContent.
Предостережение заключается в том, что этот метод jQuery не будет вставлять лишние пробелы или разрывы строк, которые могут быть видны на экране, вызванные субэлементами (например, <br />) содержимого.
Если вы создаете несколько сценариев для доступности, и ваша таблица стилей анализируется для неслужебного рендеринга, например плагинов, используемых для связи с читателем Брайля, этот инструмент должен использовать textContent, если он должен содержать специальные знаки препинания, которые добавляются в пронумерованные в стиле "display: none" и обычно включаются в страницы (например, для надстрочных индексов/индексов), в противном случае innerText будет очень конфузивным для читателя Брайля.
Тексты, скрытые трюками CSS, теперь обычно игнорируются основными поисковыми системами (которые также будут анализировать CSS ваших HTML-страниц, а также будут игнорировать тексты, которые не контрастируют с цветами на заднем плане), используя парсер HTML/CSS и свойство DOM "innerText" точно так же, как в современных визуальных браузерах (по крайней мере, этот невидимый контент не будет проиндексирован, поэтому скрытый текст не может использоваться в качестве трюка, чтобы заставить включение некоторых ключевых слов на странице, чтобы проверить его содержимое); но этот скрытый текст будет отображаться на странице результатов (если страница по-прежнему была квалифицирована из индекса, который должен быть включен в результаты), используя свойство "textContent" вместо полного HTML для стирания дополнительных стилей и скриптов.
ЕСЛИ вы назначаете некоторый простой текст в любом из этих двух свойств, это заменит внутреннюю разметку и стили, применяемые к ней (только назначенный элемент сохранит свой тип, атрибуты и стили), поэтому оба свойства будут содержать тот же контент. Тем не менее, некоторые браузеры теперь больше не будут соблюдать запись в innerText и позволят вам перезаписать свойство textContent (вы не можете вставлять HTML-разметку при записи этих свойств, так как специальные символы HTML будут правильно закодированы с использованием числовых символов, чтобы они отображались буквально, если вы затем прочитаете свойство innerHTML после назначения innerText или textContent.
myElement.innerText = myElement.textContent = "foo";
Изменить (спасибо Mark Amery за комментарий ниже): сделайте это так, если вы не знаете разумного сомнения, что ни один код не будет полагаться на проверку существования этих свойств, например (например) jQuery. Но если вы используете jQuery, вы, вероятно, просто используете функцию "text" и будете делать $('# myElement'). Text ('foo'), как показывают некоторые другие ответы.
innerText был добавлен в Firefox и должен быть доступен в выпуске FF45: https://bugzilla.mozilla.org/show_bug.cgi?id=264412
В будущем будет написана спецификация проекта, которая, как ожидается, будет включена в уровень жизни HTML: http://rocallahan.github.io/innerText-spec/, https://github.com/whatwg/html/issues/465
Обратите внимание, что в настоящее время версии Firefox, Chrome и IE несовместимы. В будущем мы можем ожидать, что Firefox, Chrome и Edge будут сходиться, когда старый IE останется несовместимым.
Смотрите также: https://github.com/whatwg/compat/issues/5
Как насчет этого?
//$elem is the jQuery object passed along.
var $currentText = $elem.context.firstChild.data.toUpperCase();
** Мне нужно было сделать мой заглавный.
Как и в 2016 году из Firefox v45, innerText работает на firefox, посмотрите на его поддержку: http://caniuse.com/#search=innerText
Если вы хотите, чтобы он работал с предыдущими версиями Firefox, вы можете использовать textContent, который имеет лучшую поддержку в Firefox, но хуже в более старых версиях IE: http://caniuse.com/#search=textContent
Это был мой опыт работы с innerText, textContent, innerHTML и значением:
// elem.innerText = changeVal; // works on ie but not on ff or ch
// elem.setAttribute("innerText", changeVal); // works on ie but not ff or ch
// elem.textContent = changeVal; // works on ie but not ff or ch
// elem.setAttribute("textContent", changeVal); // does not work on ie ff or ch
// elem.innerHTML = changeVal; // ie causes error - doesn't work in ff or ch
// elem.setAttribute("innerHTML", changeVal); //ie causes error doesn't work in ff or ch
elem.value = changeVal; // works in ie and ff -- see note 2 on ch
// elem.setAttribute("value", changeVal); // ie works; see note 1 on ff and note 2 on ch
ie = internet explorer, ff = firefox, ch = google chrome.
примечание 1: ff работает до тех пор, пока значение не будет удалено с обратным пространством - см. примечание к Рей Веге выше.
примечание 2: работает несколько в chrome - после обновления он не изменился, а затем щелкнул и снова щелкните в поле, и появится значение.
Лучшая партия - elem.value = changeVal; который я не комментировал выше.
Просто переписывание комментариев по исходному сообщению. innerHTML работает во всех браузерах. Спасибо stefita.
myElement.innerHTML = "foo";
нашел это здесь:
<!--[if lte IE 8]>
<script type="text/javascript">
if (Object.defineProperty && Object.getOwnPropertyDescriptor &&
!Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get)
(function() {
var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
Object.defineProperty(Element.prototype, "textContent",
{ // It won't work if you just drop in innerText.get
// and innerText.set or the whole descriptor.
get : function() {
return innerText.get.call(this)
},
set : function(x) {
return innerText.set.call(this, x)
}
}
);
})();
</script>
<![endif]-->
Также можно эмулировать поведение innerText в других браузерах:
if (((typeof window.HTMLElement) !== "undefined") && ((typeof HTMLElement.prototype.__defineGetter__) !== "undefined")) {
HTMLElement.prototype.__defineGetter__("innerText", function () {
if (this.textContent) {
return this.textContent;
} else {
var r = this.ownerDocument.createRange();
r.selectNodeContents(this);
return r.toString();
}
});
HTMLElement.prototype.__defineSetter__("innerText", function (str) {
if (this.textContent) {
this.textContent = str;
} else {
this.innerHTML = str.replace(/&/g, '&').replace(/>/g, '>').replace(/</g, '<').replace(/\n/g, "<br />\n");
}
});
}