16.01.2019, 15:24
|
 |
Аспирант
|
|
Регистрация: 14.04.2010
Сообщений: 46
|
|
|
Как получить raw-содержимое тега html?
Очень простая задача. Есть тег DIV, в нем содержится некий произвольный html-код, например:
<div class="add-html-code test-mar">
<b>Пример кода:</b>
<p>1 < 2 + 3 > 4 = 5 : 6 * 7 / 8 \ 9 - 0</p>
<img class="rounded" src="samples/001_p.jpg" alt="" />
<img class="rounded-top" src="samples/002_p.jpg" alt="" />
<img class="rounded-right" src="samples/003_p.jpg" alt="" />
<img class="rounded-bottom" src="samples/004_p.jpg" alt="" />
<img class="rounded-left" src="samples/005_p.jpg" alt="" />
<img class="rounded-circle" src="samples/006_p.jpg" alt="" />
<img class="rounded-pill" src="samples/007_p.jpg" alt="" />
<img class="rounded-0" src="samples/008_p.jpg" alt="" />
</div>
Нужно получить содержимое тега DIV в неизменном виде. То есть, в строковую переменную должен быть помещен такой текст:
|
Код:
|
<b>Пример кода:</b>
<p>1 < 2 + 3 > 4 = 5 : 6 * 7 / 8 \ 9 - 0</p>
<img class="rounded" src="samples/001_p.jpg" alt="" />
<img class="rounded-top" src="samples/002_p.jpg" alt="" />
<img class="rounded-right" src="samples/003_p.jpg" alt="" />
<img class="rounded-bottom" src="samples/004_p.jpg" alt="" />
<img class="rounded-left" src="samples/005_p.jpg" alt="" />
<img class="rounded-circle" src="samples/006_p.jpg" alt="" />
<img class="rounded-pill" src="samples/007_p.jpg" alt="" />
<img class="rounded-0" src="samples/008_p.jpg" alt="" /> |
Как это можно сделать на JavaScript (jQuery)?
Функция .html() преобразует код, она не подходит (как я понял).
Пропадает закрывающая косая черта для одиночных тегов (в примере IMG), а это существенно!
Вот что возвращает .html():
|
Код:
|
<b>Пример кода:</b>
<p>1 < 2 + 3 > 4 = 5 : 6 * 7 / 8 \ 9 - 0</p>
<img class="rounded" src="samples/001_p.jpg" alt="">
<img class="rounded-top" src="samples/002_p.jpg" alt="">
<img class="rounded-right" src="samples/003_p.jpg" alt="">
<img class="rounded-bottom" src="samples/004_p.jpg" alt="">
<img class="rounded-left" src="samples/005_p.jpg" alt="">
<img class="rounded-circle" src="samples/006_p.jpg" alt="">
<img class="rounded-pill" src="samples/007_p.jpg" alt="">
<img class="rounded-0" src="samples/008_p.jpg" alt=""> |
|
|
16.01.2019, 15:36
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,795
|
|
|
Смените контейнер с div'а на textarea или на script[type=text/html].
|
|
16.01.2019, 15:37
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
new XMLSerializer().serializeToString(element);
если вам нужно, чтобы это был XML, поскольку в HTML5 это не имеет смысла, там определён словарь элементов и HTML5 знает, что img одиночный элемент
Последний раз редактировалось Malleys, 16.01.2019 в 15:42.
|
|
16.01.2019, 15:56
|
 |
Профессор
|
|
Регистрация: 07.03.2011
Сообщений: 1,138
|
|
|
Очень простая задача. Есть тег DIV, в нем содержится некий произвольный html-код,
В нем уже не содержится нужный тебе код.
Парсер браузера его исправил в момент разбора(обработки) ответа/вставки.
Но если очень нужно можно снова получить эту страницу в виде простого текста и поискать там нужный исходный текст
$.get( location.href ,p=>alert( p ));
|
|
16.01.2019, 16:46
|
|
Аспирант
|
|
Регистрация: 14.04.2010
Сообщений: 46
|
|
MallSerg,
вот это правильный ответ. Спасибо, понял корень зла 
Придется изобретать велосипед для фиксации одиночных тегов после парсинга.
Тогда вопрос: как на JS регекспом в тексте добавить "/" в конце одинарных тегов?
meta, img, link, br, hr, input, area, param, col, base
Последний раз редактировалось Roman Koff, 16.01.2019 в 16:55.
|
|
16.01.2019, 18:08
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
Roman Koff,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<textarea name="" rows="50" cols="100"></textarea>
<div class="add-html-code test-mar">
<b>Пример кода:</b>
<p>1 < 2 + 3 > 4 = 5 : 6 * 7 / 8 \ 9 - 0</p>
<img class="rounded" src="samples/001_p.jpg" alt="" />
<img class="rounded-top" src="samples/002_p.jpg" alt="" />
<img class="rounded-right" src="samples/003_p.jpg" alt="" />
<img class="rounded-bottom" src="samples/004_p.jpg" alt="" />
<img class="rounded-left" src="samples/005_p.jpg" alt="" />
<img class="rounded-circle" src="samples/006_p.jpg" alt="" />
<img class="rounded-pill" src="samples/007_p.jpg" alt="" />
<img class="rounded-0" src="samples/008_p.jpg" alt="" />
</div>
<script>
var html = document.querySelector('.add-html-code.test-mar').innerHTML
var reg = new RegExp('('+'meta, img, link, br, hr, input, area, param, col, base'.split(', ').join('|')+')[^>]+', 'mig');
html = html.replace(reg, '$& /');
function htmlspecialchars_decode(string, quote_style) {
var optTemp = 0,
i = 0,
noquotes = false;
if (typeof quote_style === 'undefined') {
quote_style = 2;
}
string = string.toString()
.replace(/</g, '<')
.replace(/>/g, '>');
var OPTS = {
'ENT_NOQUOTES': 0,
'ENT_HTML_QUOTE_SINGLE': 1,
'ENT_HTML_QUOTE_DOUBLE': 2,
'ENT_COMPAT': 2,
'ENT_QUOTES': 3,
'ENT_IGNORE': 4
};
if (quote_style === 0) {
noquotes = true;
}
if (typeof quote_style !== 'number') { // Allow for a single string or an array of string flags
quote_style = [].concat(quote_style);
for (i = 0; i < quote_style.length; i++) {
// Resolve string input to bitwise e.g. 'PATHINFO_EXTENSION' becomes 4
if (OPTS[quote_style[i]] === 0) {
noquotes = true;
} else if (OPTS[quote_style[i]]) {
optTemp = optTemp | OPTS[quote_style[i]];
}
}
quote_style = optTemp;
}
if (quote_style & OPTS.ENT_HTML_QUOTE_SINGLE) {
string = string.replace(/�*39;/g, "'"); // PHP doesn't currently escape if more than one 0, but it should
// string = string.replace(/'|�*27;/g, "'"); // This would also be useful here, but not a part of PHP
}
if (!noquotes) {
string = string.replace(/"/g, '"');
}
// Put this in last place to avoid escape being double-decoded
string = string.replace(/&/g, '&');
return string;
}
document.querySelector('textarea').value = htmlspecialchars_decode(html) ;
</script>
</body>
</html>
|
|
17.01.2019, 00:59
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от Roman Koff
|
|
Придется изобретать велосипед для фиксации одиночных тегов после парсинга
|
Это называется XML.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<textarea rows="50" cols="100"></textarea>
<div class="add-html-code test-mar">
<b>Пример кода:</b>
<p>1 < 2 + 3> 4 = 5 : 6 * 7 / 8 \ 9 - 0</p>
<img class="rounded" src="samples/001_p.jpg" alt="" />
<img class="rounded-top" src="samples/002_p.jpg" alt="" />
<img class="rounded-right" src="samples/003_p.jpg" alt="" />
<img class="rounded-bottom" src="samples/004_p.jpg" alt="" />
<img class="rounded-left" src="samples/005_p.jpg" alt="" />
<img class="rounded-circle" src="samples/006_p.jpg" alt="" />
<img class="rounded-pill" src="samples/007_p.jpg" alt="" />
<img class="rounded-0" src="samples/008_p.jpg" alt="" />
</div>
<script>
var html = document.querySelector(".add-html-code.test-mar");
document.querySelector("textarea").value = new XMLSerializer()
.serializeToString(html)
.replace(/^<[^>]+>\s*\r?\n|<\/[^>]+>$/g, "");
</script>
</body>
</html>
Рег. выр. в данном случае удаляет обёртку <div class="add-html-code test-mar">
рони, а зачем вам htmlspecialchars_decode, оно же может получиться так...
htmlspecialchars_decode("<code><script>alert ('🍑');</script></code>")
Последний раз редактировалось Malleys, 17.01.2019 в 01:11.
|
|
17.01.2019, 01:31
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Сообщение от Malleys
|
|
рони, а зачем вам htmlspecialchars_decode,
|
что было, то и применил ... а есть другие варианты замены, кроме replace("<", "<")? |
|
17.01.2019, 08:42
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от рони
|
|
а есть другие варианты замены, кроме replace
|
А зачем вообще заменять html сущности символв < > т.п. не относящиеся к тегам на символы? |
|
17.01.2019, 11:54
|
|
Аспирант
|
|
Регистрация: 14.04.2010
Сообщений: 46
|
|
Спасибо за ценные советы!
В итоге заюзал .html() для получения содержимого и преобразование для добавления "/" вконце одиночных тегов:
return this.replace(/<((meta|img|link|br|hr|input|area|param|col|base).*?)>/g, '<$1 />');
|
|
|
|
