Обработка определенных тегов в тексте помещенном в textarea (для оглавления)
Здравствуйте.
Я не могу понять что-то. Прошу помощи с этим: В одно textarea я помещаю html-содержимое, далее по нажатию на кнопке скрипт должен проанализировать содержимое и каждому header добавить id, кроме того, в начало кода добавляется список с <a>, указывающий на тот или иной header. Сейчас имею кое-что работающее, но не правильно: 1. Появляется лишний и пустой <a> 2. Внутрь header не вставляется id 3. Обрабатывает не только header, но и каждый тег, например <p>.
$(document).ready(function() {
var ToC = '<nav role="navigation" class="table-of-contents">' + '<h1>On this page:</h1>' + '<ul>';
var newLine, el, title;
$('#sendTo').on('click', function () {
var insertData = $('#insertArea').val();
$(insertData,':header').each(function () {
// if ( $(this) === 'h2' ) {
el = $(this);
title = el.text();
$('el').attr('id' + title);
newLine = '<li>' + '<a href="#' + title + '">' + title + '</a>' + '</li>';
ToC += newLine;
// }
});
ToC += '</ul>' + '</nav>' + insertData;
$('#pastArea').val(ToC);
});
});
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form name="insertForm" id="insertForm">
<div style="width:45%; float: left; margin: auto;">
<textarea name="insertArea" id="insertArea" cols="80" rows="40"></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>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="cm.js"></script>
</body>
</html>
Было бы здорово, если б не только подсказали, как извлечь из insertData заголовки, но и направили, чтобы я почитал и понял, где не прав. Спасибо. |
Stenli,
можно html на входе и выходе? для примера |
С удовольствием. Можете обратить внимание, что в <a> попадает иногда то, что надо.
На входе: <h2>Лечение цистита</h2> <p>Для того чтобы устранить неприятные признаки цистита и привести мочевой пузырь в порядок, нужно принимать лекарства следующих типов:</p> <ul> <li>антибактериальные средства;</li> <li>растительные препараты;</li> <li>спазмолитики;</li> <li>нестероидные противовоспалительные;</li> <li>иммуномодуляторы и пробиотики.</li></ul> <blockquote> <h3><a id="Нолицин" name="Нолицин"></a>Нолицин</h3> <p>Этот медикамент содержит норфлоксацин, который очень эффективно воздействует на возбудителей цистита. Обычно Нолицин и его аналоги (Норбактин, Нормакс) назначаются в тех случаях, когда другие антибиотики не оказали должного воздействия на цистит. Активное действующее вещество не накапливается в других органах, а концентрируется в моче, что позволяет омывать поврежденную слизистую оболочку мочевого пузыря.</p> На выходе: <nav role="navigation" class="table-of-contents"> <h1>On this page:</h1> <ul> <li><a href="#Лечение цистита">Лечение цистита</a></li> <li><a href="#"></a></li> <li><a href="#Для того чтобы устранить неприятные признаки цистита и привести мочевой пузырь в порядок, нужно принимать лекарства следующих типов:">Для того чтобы устранить неприятные признаки цистита и привести мочевой пузырь в порядок, нужно принимать лекарства следующих типов:</a></li> <li><a href="#"></a></li> <li><a href="# антибактериальные средства; растительные препараты; спазмолитики; нестероидные противовоспалительные; иммуномодуляторы и пробиотики."> антибактериальные средства; растительные препараты; спазмолитики; нестероидные противовоспалительные; иммуномодуляторы и пробиотики.</a></li> <li><a href="#"></a></li> <li><a href="# Нолицин Этот медикамент содержит норфлоксацин, который очень эффективно воздействует на возбудителей цистита. Обычно Нолицин и его аналоги (Норбактин, Нормакс) назначаются в тех случаях, когда другие антибиотики не оказали должного воздействия на цистит. Активное действующее вещество не накапливается в других органах, а концентрируется в моче, что позволяет омывать поврежденную слизистую оболочку мочевого пузыря."> Нолицин Этот медикамент содержит норфлоксацин, который очень эффективно воздействует на возбудителей цистита. Обычно Нолицин и его аналоги (Норбактин, Нормакс) назначаются в тех случаях, когда другие антибиотики не оказали должного воздействия на цистит. Активное действующее вещество не накапливается в других органах, а концентрируется в моче, что позволяет омывать поврежденную слизистую оболочку мочевого пузыря.</a></li></ul></nav> <h2>Лечение цистита</h2> <p>Для того чтобы устранить неприятные признаки цистита и привести мочевой пузырь в порядок, нужно принимать лекарства следующих типов:</p> <ul> <li>антибактериальные средства;</li> <li>растительные препараты;</li> <li>спазмолитики;</li> <li>нестероидные противовоспалительные;</li> <li>иммуномодуляторы и пробиотики.</li></ul> <blockquote> <h3><a id="Нолицин" name="Нолицин"></a>Нолицин</h3> <p>Этот медикамент содержит норфлоксацин, который очень эффективно воздействует на возбудителей цистита. Обычно Нолицин и его аналоги (Норбактин, Нормакс) назначаются в тех случаях, когда другие антибиотики не оказали должного воздействия на цистит. Активное действующее вещество не накапливается в других органах, а концентрируется в моче, что позволяет омывать поврежденную слизистую оболочку мочевого пузыря.</p> Спойлера здесь нету, да? |
Цитата:
на выходе хотелось вариант того что вам нужно. Цитата:
[JS hide][/JS] Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
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() {
var ToC = '<nav role="navigation" class="table-of-contents">' + '<h1>On this page:</h1>' + '<ul>';
var newLine, el, title;
$('#sendTo').on('click', function () {
var insertData = $('#insertArea').val();
var div = $("<div>", {html : insertData});
$(':header', div).each(function (i,el) {
el = $(el);
var title = el.text();
el.attr('id' , title).html(title);
newLine = '<li>' + '<a href="#' + title + '">' + title + '</a>' + '</li>';
ToC += newLine;
});
ToC += '</ul>' + '</nav>' + div.html();
$('#pastArea').val(ToC);
});
});
</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">
</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>
|
А, ок!
На входе: <h2>Лечение цистита</h2> <h3>Нолицин</h3> <p>Этот медикамент содержит норфлоксацин, который очень эффективно воздействует на возбудителей цистита. Обычно Нолицин и его аналоги (Норбактин, Нормакс) назначаются в тех случаях, когда другие антибиотики не оказали должного воздействия на цистит. Активное действующее вещество не накапливается в других органах, а концентрируется в моче, что позволяет омывать поврежденную слизистую оболочку мочевого пузыря.</p> На выходе: <ul> <li><a href="#Лечение цистита">Лечение цистита</a> <ul> <li><a href="#Нолицин">Нолицин</a></li> </ul> </li> </ul> <h2><a id="Лечение цистит" name="Лечение цистит"></a>Лечение цистита</h2> <h3><a id="Нолицин" name="Нолицин"></a>Нолицин</h3> <p>Этот медикамент содержит норфлоксацин, который очень эффективно воздействует на возбудителей цистита. Обычно Нолицин и его аналоги (Норбактин, Нормакс) назначаются в тех случаях, когда другие антибиотики не оказали должного воздействия на цистит. Активное действующее вещество не накапливается в других органах, а концентрируется в моче, что позволяет омывать поврежденную слизистую оболочку мочевого пузыря.</p> Спасибо UPD: Увидел ваш пост. Сейчас обмозгую. |
Stenli,
смотрите вариант выше может устроит <h3 id="Нолицин">Нолицин</h3>вместо <h3><a id="Нолицин" name="Нолицин"></a>Нолицин</h3> иначе замениите el.attr('id' , title).html(title); на
el.html('<a id="' + title + '"></a>'+title);
добавьте нужное |
Спасибо, работает на ура. Только подскажите, в этом коде, что такое
var div = $("<div>", {html : insertData});
на 19-й строке. Я понимаю, что в переменную загоняется содержимое texarea, но ведь вроде бы оно уже помещено в insertData. Почему конструкция {html : insertData} в фигурных скобках? html: - это, видимо, не знаю, для сохранения тегов? Дайте только название, остальное попробую сам найти, почитать и понять. ------------ Ведь пробую по аналогии удалить все <p>
$('p', div).each(function () {$(this).remove(':empty');});
Но не выходит. Особенно интересует, что происходит здесь: {html : insertData} |
Цитата:
$('p', div).remove()
Цитата:
var div = document.createElement("div");
div.innerHTML = insertData;
чтобы работать с текстом как с html и сохранять id прочее где-то, div как контейнер. |
Цитата:
можно добавиить css, on, attr и всё остальное http://api.jquery.com/jQuery/#jQuery-html-attributes |
| Часовой пояс GMT +3, время: 20:47. |