Страницы анализа экранных данных, которые используют CSS для расположения и форматирующий …, как очистить CSS, применимый к HTML?
Заменить
function removeType(i,isTag,text,str2) {
text = str2.slice(0, --i);
if(text == 0){
return;
}
document.getElementById('test').innerHTML = text;
var char = text.slice(-1);
if( char === '>' ) isTag = true;
if( char === '<' ) isTag = false;
if (isTag) return removeType(i,isTag,text,str2);
setTimeout(function() { removeType(i,isTag,text,str2);}, 100);
}
на
function removeType(i,isTag,text,str2) {
text = str2.slice(0, --i);
document.getElementById('test').innerHTML = text;
if(text === ''){
return;
}
var char = text.slice(-1);
if( char === '>' ) isTag = true;
if (isTag) {
if( char === '<' ) isTag = false;
return removeType(i,isTag,text,str2);
}
setTimeout(function() { removeType(i,isTag,text,str2);}, 100);
}
Существуют две идентичные проблемы.
Если вы выйдете, когда строка пуста, но перед отображением обновления, символ останется (И строка == "", а не 0)
Если вы скажете, что тег закончен, пока вы все еще обрабатываете его , он появится. Вы должны помнить, что тег закончен для следующего раунда. Возможны несколько методов, но тот, который я предлагаю, не создает новых переменных.
Вы также можете использовать это для удаления тегов:
str2.replace(/<[^>]*>/g, '');
или (Внимание, строка должна быть доверенной):
var str2 = "Hello Stackoverflow<span class='punc'>?</span>";
const el = document.createElement('p');
el.innerHTML = str2;
str2 = el.innerText;
window.onload = function(){
var str2 = "Hello Stackoverflow<span class='punc'>?</span>";
i = 0;
j = 0;
isTag = false;
text = "";
type(i,isTag,text,str2);
}
function type(i,isTag,text,str2){
text = str2.slice(0, ++i);
if (text === str2) {
setTimeout(function() { removeType(i,isTag,text,str2);}, 2000);
return;
}
document.getElementById('test').innerHTML = text;
var char = text.slice(-1);
if( char === '<' ) isTag = true;
if( char === '>' ) isTag = false;
if (isTag) return type(i,isTag,text,str2);
setTimeout(function() { type(i,isTag,text,str2);}, 80);
}
function removeType(i,isTag,text,str2) {
text = str2.slice(0, --i);
document.getElementById('test').innerHTML = text;
if(text === ''){
return;
}
var char = text.slice(-1);
if( char === '>' ) isTag = true;
if (isTag) {
if( char === '<' ) isTag = false;
return removeType(i,isTag,text,str2);
}
setTimeout(function() { removeType(i,isTag,text,str2);}, 100);
}<div id="test"> </div>4 ответа
Сегодня мне нужно было соскребать диалоговые окна обмена с Facebook, чтобы использовать их в качестве динамических примеров предварительного просмотра в нашем конструкторе приложений для facebook-приложений. Я взял кодовую базу Firebug 1.5 и добавил новую опцию контекстного меню "Copy HTML with inlined styles". Я скопировал их функцию getElementHTML из lib. js и модифицировал ее для этого:
- удалить класс, id и атрибуты стилей
- remove onclick and similar javascript handlers
- remove all data-something attributes
- remove explicit hrefs и replace them на "#"
- replace all block level elements with div and inline element with span (чтобы предотвратить наследование стилей на целевой странице)
- absolutize relative urls
- inline all applied non По умолчанию css атрибуты вписываются в совершенно новый атрибут стиля
- уменьшают разбухание стиля inline, рассматривая наследование родительского/детского стиля с помощью traversion DOM tree up
- indent output
Он хорошо работает для более простых страниц, но решение не является 100% надежным из-за ошибок в Firebug (или Firefox? ). Но оно определенно может быть использовано при работе с веб-разработчиком, который может отлаживать и исправлять все причуды.
Проблемы, которые я нашел до сих пор:
- иногда четкое свойство css не испускается (оно довольно плохо ломает макет)
- :hover и другие псевдо-классы не могут быть захвачены таким образом
- firefox держит только mozilla конкретные свойства/значения css в его модели, так что, например, вы теряете -webkit трансграничного-радиуса, потому что это было пропущено CSS парсером
В любом случае, это решение сэкономило большую часть моего времени. Первоначально я вручную выбирал куски их таблиц стилей и делал ручной выбор и постобработку. Это было медленно, скучно и загрязняло пространство имён нашего класса. Теперь я могу вырезать разметку facebook за минуты вместо часов и экспортированная разметка не мешает остальной части страницы.
Хорошее начало было бы следующим: сделайте передачу через патч HTML, который Вы планируете извлечь, собирая каждый элемент (и его идентификатор/классы/встроенные стили) к массиву. Захватите стили для тех идентификаторов элемента и классов из таблиц стилей страницы сразу.
Затем от наиболее удаленного элемента (элементов) в целевом патче проложите себе путь через остальную часть элементов в DOM подобным способом, в конечном счете полностью до тела и элементов HTML, выдержав сравнение с Вашим начальным массивом и собрав любые стили, которые не были объявлены в целевом патче или его прикладных стилях.
Вы также захотите проверить на любого * объявления и захватить их также. Затем удостоверьтесь при повторном применении стилей к возможному выводу, Вы делаете так в правильном порядке, когда Вы забрали их из низкого-к-высокому в иерархии DOM, и они должны будут быть повторно применены высокие-к-низкому.
Быстрый взлом был бы к выпадающему их файлом CSS и применил бы его к странице, которую Вы используете для отображения данных. Для предотвращения любой интерференции, Вы могли загрузить страницу в IFrame везде, где необходимо отобразить его. Конечно, я должен подвергнуть сомнению намерение этого кода. Вам разрешают переиздать информацию, которую Вы очищаете?
Если у Вас есть какой-либо способ определить "вычисленный стиль", затем Вы могли бы эффективно выбросить таблицу стилей и, **** удушье ****, применить встроенные стили с помощью всех свойств вычисленных стилей.
Но я не рекомендую это. Это будет очень чрезмерно увеличено в размерах.