Нужно из всего кода оставить только содержимое BODY, но body вырезается
Есть код под спойлером:
$(document).ready(function() {
var Final = '';
$('#sendTo').on('click', function () {
var insertData = $('#insertArea').val();
var div = $("<div>", {html : insertData});
// only body content with internal tags
var bodyVal = $('body', div).html();
$(div).empty();
$(div).remove();
$(div).html('bodyVal');
// find and replace all href links to {{ $landing_url }}
$('a', div).attr("href","{{ $landing_url }}");
// find and replace all img to {{ $landing_url }}
$('img', div).each(function (i,el) {
var srcVal=el.src.substr(el.src.lastIndexOf("/")+1,el.src.length);
$(this).attr("src","{{ asset('layers/'. $template_folder .'/img/" + srcVal + "') }}");
});
// delete tag script, iframe, noscript with content
$('script', div).empty();
$('noscript', div).empty();
$('iframe', div).empty();
$('script', div).remove();
$('noscript', div).remove();
$('iframe', div).remove();
// display result
Final += "@include('layers.header')<body>" + div.html() + "@include('layers.footer')";
$('#pastArea').val(Final);
});
});
Задумка такая, что из: <doctype! html> <html> <head></head> <body> <div></div> </body> </html> Должно оставаться это: <div></div> Но при конвертации исчезают теги <head>, <body>, <html> при этом все их содержимое остается, хотя я jQuery такого не просил. А потому я не могу извлечь содержимое <body>. Что не так? Догадываюсь, что дело в 7,8 строке кода, но я там не очень могу понять. |
Stenli,
:-? подожду телепата ... |
Цитата:
|
Stenli,
я не понимаю, что вы хотите сделать. |
Понял, осознал.
Это ответвление темы этой: http://javascript.ru/forum/jquery/69...lavleniya.html Суть такая, что в первый textarea помещается код HTML, а во втором textarea должен появится сконвертированный, очищенный код. То есть я вставляю код <doctype! html> <html> <head></head> <body> <div></div> </body> </html> jQuery думает и выдает это, удаляя все ненужное: <div></div> Только jQuery почему-то удаляет теги, которые я не просил удалять. В частности тег <body>. |
Stenli,
ок -- видимо браузер считает что одного body на страницу достаточно. |
Мы сегодня похоже не понимаем друг друга :-)
Браузер тут не должен ничего понимать, мне кажется. Все изменения происходят не на сайте, а внутри формы textarea - объяснил как мог. Это нечто похожее, как вы мне советовали, когда был вопрос об автооглавлении (пример по ссылке выше). Только тут не оглавление сделать, а вытащить некоторое содержимое. |
Stenli,
пока не знаю |
Цитата:
Только помогите разобраться, как он это провернул: ссыль Или тут что-то нарешали, но я не пойму как: ссыль |
Stenli,
ждите специалиста... Цитата:
Цитата:
|
Stenli,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#sendTo').on('click', function () {
var insertData = $('#insertArea').val();
var div = $("<div>", {html : insertData});
$('#pastArea').val($(">", div).html().trim());
});
});
</script>
</head>
<body>
<form name="insertForm" id="insertForm">
<div style="width:45%; float: left; margin: auto;">
<textarea name="insertArea" id="insertArea" cols="80" rows="40"><doctype! html>
<html>
<head></head>
<body>
<div></div>
</body>
</html>
</textarea>
</div>
</form>
<br>
<input type="button" name="sendTo" value="Send to" id="sendTo">
<form name="pastForm" id="pastForm">
<div style="width:45%; float: right; margin: auto;">
<textarea name="pastArea" id="pastArea" cols="80" rows="40"></textarea>
</div>
</form>
<br>
</body>
</html>
|
Спасибо, Рони за время, но немного не то.
Цитата:
<doctype! html> <head> <meta example 1> <meta example 2> <link example 1> <link example 2> </head> <body> <div> example 1 </div> <div> example 2 </div> </body> </html> То после конвертации получаем: <meta example 1> <meta example 2> <link example 1> <link example 2> <div> example 1 </div> <div> example 2 </div> Куда-то исчезают <body>, <head>, в итоге в JS-код они не попадают и я не могу от них оттолкнуться, чтобы захватить то, что внутри них. Как правильно заметил Рони, тут браузер что-то химичит, считая <body> внутри <textarea> лишним... наверное. Полный HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
<script type="text/javascript" src="assets/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/preland.js"></script>
<title>Preland convert</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="text-center" style="margin-top: 20px;">
<button type="button" name="sendTo" value="Send to" id="sendTo" class="btn btn-success">Адаптировать</button>
</div>
<div class="text-center" style="font-size: 12px; margin: 10px;">Каждый новый текст требует обновления страницы (F5 на клавиатуре или кнопка обновить <span class="glyphicon glyphicon-repeat"></span>)</div>
<hr />
<div class="col-lg-12">
<label>Введите html-текст, который нужно адаптировать (правая кнопка мыши + вставить или Ctrl+V)</label>
<textarea class="form-control" name="insertArea" id="insertArea" cols="80" rows="10">
</textarea>
</div>
<div class="col-lg-12" style="margin-top: 10px;">
<label>Скопируйте/вырежьте адаптированный html-текст (правая кнопка мыши + копировать или Ctrl+C/X)</label>
<textarea class="form-control" name="pastArea" id="pastArea" cols="80" rows="10"></textarea>
</div>
<br>
</div>
</div>
</body>
</html>
Полный JS:
$(document).ready(function() {
var Final = '';
$('#sendTo').on('click', function () {
var insertData = $('#insertArea').val();
var bodyVal = $("<body>", {html : insertData});
var div = $("<div>", {html : insertData});
// only body content with internal tags
$(div).empty();
$(div).remove();
$(div).html(bodyVal);
// find and replace all href links to {{ $landing_url }}
$('a', div).attr("href","{{ $landing_url }}");
// find and replace all img to {{ $landing_url }}
$('img', div).each(function (i,el) {
var srcVal=el.src.substr(el.src.lastIndexOf("/")+1,el.src.length);
$(this).attr("src","{{ asset('layers/'. $template_folder .'/img/" + srcVal + "') }}");
});
// delete tag script, iframe, noscript with content
$('script', div).empty();
$('noscript', div).empty();
$('iframe', div).empty();
$('script', div).remove();
$('noscript', div).remove();
$('iframe', div).remove();
// replace dates
var reg = /\d{2}\.\d{2}\.\d{4}/g;
$(div).html(function (a,h) {
return h.replace(reg, '<?=date('+'d.m.Y'+', strtotime('+'0 day'+'));?>');
});
// display result
Final += "@include('layers.header') <body> " + div.html() + " @include('layers.footer')";
$('#pastArea').val(Final);
});
});
Вопрос все тот же: как вытащить содержимое тега <body>? Путаница может быть в том, что цель моего jQuery обработать не код своей страницы, а код помещенный в <textarea>. И, да, простите за мою тупость - не сразу правильно поставил вопрос. Впрочем я и сейчас не уверен до конца, что все понятно. |
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#sendTo').on('click', function () {
var str = $('#insertArea').val();
str = str.substring(str.indexOf('<body>')+6, str.lastIndexOf('</body>')).trim();
$('#pastArea').val(str);
});
});
</script>
</head>
<body>
<form name="insertForm" id="insertForm">
<div style="width:45%; float: left; margin: auto;">
<textarea name="insertArea" id="insertArea" cols="80" rows="40"><doctype! html>
<head>
<meta example 1>
<meta example 2>
<link example 1>
<link example 2>
</head>
<body>
<div>
example 1
</div>
<div>
example 2
</div>
</body>
</html>
</textarea>
</div>
</form>
<br>
<input type="button" name="sendTo" value="Send to" id="sendTo">
<form name="pastForm" id="pastForm">
<div style="width:45%; float: right; margin: auto;">
<textarea name="pastArea" id="pastArea" cols="80" rows="40"></textarea>
</div>
</form>
<br>
</body>
</html>
Ты умеешь запутать, не уверен что это то что нужно. |
Вот она! Спасибо :dance:
Там еще кое-что поддоделал, чтобы можно было еще работать с данными, типа удалять скрипты, менять даты и так далее. Тема решена. Карму поднял чуть раньше. И отдельное спасибо за терпение всем профессорам. Ключевые строки:
var bodyVal = $('#insertArea').val();
bodyVal = bodyVal.substring(bodyVal.indexOf('<body>')+6, bodyVal.lastIndexOf('</body>')).trim();
var div = $("<div>", {html : bodyVal});
Теперь, если надо, например, удалить все скрипты и их содержимое из оставшегося куска кода, то просто дополняем скрипт:
$('script', div).empty();
$('script', div).remove();
|
| Часовой пояс GMT +3, время: 08:21. |