В приложении "use strict"
я использую document.createTreeWalker
для обхода дерева DOM. После того, как я получаю дерево из браузера, я использую цикл while, чтобы поместить значения в массив. Код представляет собой обновление превосходного плагина Letteringjs.com, и мою версию можно увидеть в действии здесь.
function injector(t, splitter, klass, after) {
var inject = '', n,
tree = [],
styleStack = [],
splitIndex = 0,
styleAndSplit = function (node, splitter, klass, after) {
var particles = $(node).text().split(splitter);
// Wrap each particle with parent style tags if present
for (var j = 0, len = particles.length; j < len; j++) {
var str = '<span class="'+klass+((splitIndex++)+1)+'">'+particles[j]+'</span>'+after;
for (var k = styleStack.length - 1, style; style = styleStack[k--];) {
str = '<' + style.tagName.toLowerCase() + (style.className ? ' class="' + style.className + '"' : '') + '>' +
str +
'</' + style.tagName.toLowerCase() + '>'
}
inject += str;
}
},
Walker /* Texas Ranger */ = document.createTreeWalker(
t,
NodeFilter.SHOW_ALL,
{ acceptNode: function (node) {
// Keep only text nodes and style altering tags
if (node.nodeType === 3 || node.nodeType === 1 && !!node.tagName &&
(node.tagName.toLowerCase() === 'i' ||
node.tagName.toLowerCase() === 'b' ||
node.tagName.toLowerCase() === 'u' ||
node.tagName.toLowerCase() === 'span')) {
return NodeFilter.FILTER_ACCEPT;
} else {
return NodeFilter.FILTER_SKIP;
}
}},
false
);
while (n = Walker.nextNode()) tree.push(n);
// This loop traverses all of the nodes in the order they appear within the HTML tree
// It will then stack up nested styling tags accordingly
for (var i = 0, node; node = tree[i++];) {
if (node.nodeType === 1) {
styleStack.push(node);
} else {
// Get rid of nodes containing only whitespace (newlines specifically)
if ($.trim(node.nodeValue).length) {
while (styleStack.length && node.parentNode !== styleStack[styleStack.length - 1]) { styleStack.pop(); }
styleAndSplit(node, splitter, klass, after);
}
}
}
$(t).empty().append(inject);
}
Этот код работает в Firefox, Chrome и мобильных браузерах. Но IE9 и IE10 не очень хорошо работают.
Оба прерывают выполнение на строке while (n = Walker.nextNode()) tree.push(n);
, предлагая:
SCRIPT1047: в строгом режиме объявления функций не могут быть вложены внутрь инструкции или блока. Они могут появляться только на верхнем уровне или непосредственно внутри тела функции.
РЕДАКТИРОВАТЬ: это пример из MSDN что должно вызвать эту ошибку:
var arr = [1, 2, 3, 4, 5];
var index = null;
for (index in arr) {
function myFunc() {};
}
РЕДАКТИРОВАТЬ: Но это не имеет смысла, потому что я не объявляю функцию, я только выполняю ее. Несмотря на это, я последовал предложению fred02138 удалить объявление функции styleAndSplit
(я просто заменил вызов кодом функции и стер объявление), но это не исправило ошибку.
Есть ли другой способ обойти TreeWalker
или есть обходной путь для IE (без потери строгого режима)?
styleAndSplit
? Разве это не объявление вложенной функции? - person fred02138   schedule 16.10.2013use-strict
в других частях моего приложения, это не вызывает ошибки. Более того, это происходит только в IE. Я попробую. И дайте знать. - person pilau   schedule 16.10.2013