Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как получить raw-содержимое тега html? (https://javascript.ru/forum/jquery/76490-kak-poluchit-raw-soderzhimoe-tega-html.html)

Roman Koff 16.01.2019 15:24

Как получить 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 &lt; 2 + 3 &gt; 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="">


Nexus 16.01.2019 15:36

Смените контейнер с div'а на textarea или на script[type=text/html].

Malleys 16.01.2019 15:37

new XMLSerializer().serializeToString(element);
если вам нужно, чтобы это был XML, поскольку в HTML5 это не имеет смысла, там определён словарь элементов и HTML5 знает, что img одиночный элемент

MallSerg 16.01.2019 15:56

Очень простая задача. Есть тег DIV, в нем содержится некий произвольный html-код,
В нем уже не содержится нужный тебе код.
Парсер браузера его исправил в момент разбора(обработки) ответа/вставки.
Но если очень нужно можно снова получить эту страницу в виде простого текста и поискать там нужный исходный текст

$.get( location.href ,p=>alert( p ));

Roman Koff 16.01.2019 16:46

MallSerg,
вот это правильный ответ. Спасибо, понял корень зла ;)
Придется изобретать велосипед для фиксации одиночных тегов после парсинга.

Тогда вопрос: как на JS регекспом в тексте добавить "/" в конце одинарных тегов?

meta, img, link, br, hr, input, area, param, col, base

рони 16.01.2019 18:08

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(/&lt;/g, '<')
    .replace(/&gt;/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(/&#0*39;/g, "'"); // PHP doesn't currently escape if more than one 0, but it should
    // string = string.replace(/&apos;|&#x0*27;/g, "'"); // This would also be useful here, but not a part of PHP
  }
  if (!noquotes) {
    string = string.replace(/&quot;/g, '"');
  }
  // Put this in last place to avoid escape being double-decoded
  string = string.replace(/&amp;/g, '&');

  return string;
}




   document.querySelector('textarea').value = htmlspecialchars_decode(html) ;
</script>
</body>
</html>

Malleys 17.01.2019 00:59

Цитата:

Сообщение от 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>&lt;script&gt;alert ('🍑');&lt;/script&gt;</code>")

рони 17.01.2019 01:31

Цитата:

Сообщение от Malleys
рони, а зачем вам htmlspecialchars_decode,

что было, то и применил ... а есть другие варианты замены, кроме replace("&lt;", "<")?

laimas 17.01.2019 08:42

Цитата:

Сообщение от рони
а есть другие варианты замены, кроме replace

А зачем вообще заменять html сущности символв < > т.п. не относящиеся к тегам на символы?

Roman Koff 17.01.2019 11:54

Спасибо за ценные советы!
В итоге заюзал .html() для получения содержимого и преобразование для добавления "/" вконце одиночных тегов:
return this.replace(/<((meta|img|link|br|hr|input|area|param|col|base).*?)>/g, '<$1 />');


Часовой пояс GMT +3, время: 17:20.