Форум

Roman Koff · #1 (**permalink**) 16.01.2019, 15:24

Очень простая задача. Есть тег 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 · #2 (**permalink**) 16.01.2019, 15:36

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

Malleys · #3 (**permalink**) 16.01.2019, 15:37

new XMLSerializer().serializeToString(element);

если вам нужно, чтобы это был XML, поскольку в HTML5 это не имеет смысла, там определён словарь элементов и HTML5 знает, что img одиночный элемент

MallSerg · #4 (**permalink**) 16.01.2019, 15:56

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

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

Roman Koff · #5 (**permalink**) 16.01.2019, 16:46

MallSerg,
вот это правильный ответ. Спасибо, понял корень зла

Придется изобретать велосипед для фиксации одиночных тегов после парсинга.

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

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

рони · #6 (**permalink**) 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 · #7 (**permalink**) 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><script>alert ('🍑');</script></code>")

рони · #8 (**permalink**) 17.01.2019, 01:31

Сообщение от Malleys

рони, а зачем вам htmlspecialchars_decode,

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

laimas · #9 (**permalink**) 17.01.2019, 08:42

Сообщение от рони

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

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

Roman Koff · #10 (**permalink**) 17.01.2019, 11:54

Спасибо за ценные советы!
В итоге заюзал .html() для получения содержимого и преобразование для добавления "/" вконце одиночных тегов:

return this.replace(/<((meta|img|link|br|hr|input|area|param|col|base).*?)>/g, '<$1 />');

Форум

Справочник

Discord чат

Курсы javascript