Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.01.2019, 15:24
Аватар для Roman Koff
Аспирант
Отправить личное сообщение для Roman Koff Посмотреть профиль Найти все сообщения от Roman Koff
 
Регистрация: 14.04.2010
Сообщений: 43

Как получить 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="">
Ответить с цитированием
  #2 (permalink)  
Старый 16.01.2019, 15:36
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,734

Смените контейнер с div'а на textarea или на script[type=text/html].
Ответить с цитированием
  #3 (permalink)  
Старый 16.01.2019, 15:37
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 542

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

Последний раз редактировалось Malleys, 16.01.2019 в 15:42.
Ответить с цитированием
  #4 (permalink)  
Старый 16.01.2019, 15:56
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 901

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

$.get( location.href ,p=>alert( p ));
Ответить с цитированием
  #5 (permalink)  
Старый 16.01.2019, 16:46
Аватар для Roman Koff
Аспирант
Отправить личное сообщение для Roman Koff Посмотреть профиль Найти все сообщения от Roman Koff
 
Регистрация: 14.04.2010
Сообщений: 43

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

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

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

Последний раз редактировалось Roman Koff, 16.01.2019 в 16:55.
Ответить с цитированием
  #6 (permalink)  
Старый 16.01.2019, 18:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,434

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>
Ответить с цитированием
  #7 (permalink)  
Старый 17.01.2019, 00:59
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 542

Сообщение от 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>")

Последний раз редактировалось Malleys, 17.01.2019 в 01:11.
Ответить с цитированием
  #8 (permalink)  
Старый 17.01.2019, 01:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,434

Сообщение от Malleys
рони, а зачем вам htmlspecialchars_decode,
что было, то и применил ... а есть другие варианты замены, кроме replace("&lt;", "<")?
Ответить с цитированием
  #9 (permalink)  
Старый 17.01.2019, 08:42
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 9,958

Сообщение от рони
а есть другие варианты замены, кроме replace
А зачем вообще заменять html сущности символв < > т.п. не относящиеся к тегам на символы?
Ответить с цитированием
  #10 (permalink)  
Старый 17.01.2019, 11:54
Аватар для Roman Koff
Аспирант
Отправить личное сообщение для Roman Koff Посмотреть профиль Найти все сообщения от Roman Koff
 
Регистрация: 14.04.2010
Сообщений: 43

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как получить содержимое консоли браузера? IlyaP_2008 Общие вопросы Javascript 3 07.07.2015 07:27
initComponent: Как получить данные родителя и как получить store для вызова load()? Пролетарий ExtJS 76 04.07.2015 10:22
Как получить свойсвто объекта? Armen Общие вопросы Javascript 4 19.10.2014 06:45
Как получить все атрибуты html елемента imsha Events/DOM/Window 1 07.12.2011 11:42
На входе HTML получить на выходе просто текст, как? Dmitry Общие вопросы Javascript 2 25.08.2008 10:42