Я делаю приложение node js
, которое анализирует и загружает изображения из Интернета. Однако при разборе htmlString
jQuery пытается загрузить все изображения с тегом src
, что вызывает ошибки. Обычно я удаляю элементы img
, как и другие элементы, но мне нужно иметь возможность получать и сохранять тег img src
из определенных элементов img для использования в дальнейшем. Если возможно, я пытаюсь заменить все теги src
элемента img на теги data-img
, чтобы таким образом я мог получить доступ к сохраненному url
без необходимости загружать каждое изображение.
request('example.com', (error, response, htmlString) => {
if (!error && response.statusCode == 200) {
var html = $(htmlString.replace(/(<(\b(style|script|head|link)\b)(([^>]*/>)|([^\7]*(</\2[^>]*>)))|(<\bimg\b)[^>]*>|(\b(background|style)\b=\s*"[^"]*"))/g,"").functionThatReplacesAllImgSrcTagsWithDataImg());
// How do I replace all src in the img tag with data-img?
var useLater = [];
html.find('img.specific__img').each(function(i) {
useLater.push($(this).attr('data-img'));
});
}
});
Вместо использования регулярного выражения, вероятно, было бы намного элегантнее использовать DOMParser
для исправления строки HTML - просто перебирайте элементы, соответствующие селектору img[src]
, установите их data-img
и удалите их src
:
const useLater = [];
const htmlStr = `
<div><img src = "foo"></div>
<div><img src = "baz"><img src = "baz"></div>
`;
const doc = new DOMParser().parseFromString(htmlStr, 'text/html');
doc.querySelectorAll('img[src]').forEach((img) => {
const src = img.getAttribute('src');
img.setAttribute('data-img', src);
img.removeAttribute('src');
useLater.push(src);
});
console.info(doc.body.innerHTML);
Выделите их, как если бы вы выбрали любой элемент, а затем remove()
. document.querySelectorAll('script').forEach(script => script.remove())
Последний вопрос: как мне заменить все элементы noscript
чем-то вроде <div class = "noscript"></div>
, чтобы я мог получить доступ к элементам img внутри noscript из dom?
Как только элемент <noscript>
выбран, выберите его родительский элемент и используйте replaceChild, чтобы заменить его новым div.
У меня небольшие проблемы с тем, чтобы это работало. Если я создаю текстовый узел, он не безопасен для html, и внутренние элементы выглядят так: <div class = "noscript"><img src = "..."></div>
, но если я использую cloneNode, я застрял на узле noscript. doc.querySelectorAll('noscript').forEach((noscript) => { var replacementNode = doc.createElement('div'); replacementNode.setAttribute('class', 'noscript'); replacementNode.appendChild(doc.createTextNode(noscript.innerHTML)); noscript.parentNode.replaceChild(replacementNode, noscript); });
Назначьте replacementNode
innerHTML
, если вы хотите сохранить HTML, который существовал в исходном элементе noscript
. (Не создавайте / не добавляйте узел текст)
Спасибо, это сработало. Как мне также полностью удалить другие ранее упомянутые элементы с помощью DOMParser? т.е. голова, сценарий и т. д.