Форум

Stenli · #1 (**permalink**) 25.06.2017, 11:13

Здравствуйте.

Я не могу понять что-то. Прошу помощи с этим:

В одно 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 заголовки, но и направили, чтобы я почитал и понял, где не прав.

Спасибо.

рони · #2 (**permalink**) 25.06.2017, 11:25

Stenli,
можно html на входе и выходе? для примера

Stenli · #3 (**permalink**) 25.06.2017, 15:35

С удовольствием. Можете обратить внимание, что в <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>

Спойлера здесь нету, да?

рони · #4 (**permalink**) 25.06.2017, 16:45

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

Можете обратить внимание, что в <a> попадает иногда то, что надо.

на выходе хотелось вариант того что вам нужно.

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

Спойлера здесь нету, да?

[JS hide][/JS]

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони · #5 (**permalink**) 25.06.2017, 17:03

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>

Stenli · #6 (**permalink**) 25.06.2017, 17:10

А, ок!

На входе:

<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: Увидел ваш пост. Сейчас обмозгую.

рони · #7 (**permalink**) 25.06.2017, 17:17

Stenli,
смотрите вариант выше может устроит

<h3 id="Нолицин">Нолицин</h3>

вместо

<h3><a id="Нолицин" name="Нолицин"></a>Нолицин</h3>

иначе замениите el.attr('id' , title).html(title); на

el.html('<a id="' + title + '"></a>'+title);

добавьте нужное

Stenli · #8 (**permalink**) 27.06.2017, 08:46

Спасибо, работает на ура. Только подскажите, в этом коде, что такое

var div = $("<div>", {html : insertData});

на 19-й строке.

Я понимаю, что в переменную загоняется содержимое texarea, но ведь вроде бы оно уже помещено в insertData. Почему конструкция {html : insertData} в фигурных скобках? html: - это, видимо, не знаю, для сохранения тегов?

Дайте только название, остальное попробую сам найти, почитать и понять.

------------

Ведь пробую по аналогии удалить все <p>

$('p', div).each(function () {$(this).remove(':empty');});

Но не выходит.

Особенно интересует, что происходит здесь: {html : insertData}

рони · #9 (**permalink**) 27.06.2017, 09:08

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

Ведь пробую по аналогии удалить все <p>

$('p', div).remove()

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

что такое
var div = $("<div>", {html : insertData});

тоже что

var div = document.createElement("div");
    div.innerHTML = insertData;

чтобы работать с текстом как с html и сохранять id прочее где-то, div как контейнер.

рони · #10 (**permalink**) 27.06.2017, 09:14

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

Почему конструкция {html : insertData} в фигурных скобках?

это обьект с данными для формирования элемента
можно добавиить css, on, attr и всё остальное
http://api.jquery.com/jQuery/#jQuery-html-attributes

Форум

Справочник

Discord чат

Курсы javascript