jQuery + xml + regex

@gGrn-7DA · Регистрация: 17.01.2010

Студворк — интернет-сервис помощи студентам

Сервер возвращает ответ в виде xml-файла:

XML
1
2
3
4
<?xml version='1.0' encoding='utf-8'?>
<world countries_cout='([0-9]+)'>
    <country country_id='([0-9]+)' country_name='([\\w]+)' country_population='([0-9]+)' />+
</world>

1) надо преобразовать в html-content:

HTML5
1
2
3
4
5
6
7
8
<div id='world'>
    <div class='countries_count'>$1</div>
    <div class='country'>
        <div class='country_id'>$2</div>
        <div class='country_name'>$3</div>
        <div class='country_population'>$4</div>
    </div>
</div>

3)надо на клик по контейнеру <div class='country'> повесить обработчик, что бы он в var select записывал строку 'country=country_id'

контейнеров <country/> в xml-файле будет несколько. С regex сталкивался, но он мне пока не очень поддался.
В jQuery вопрос как получить country_id?

Добавлено через 2 часа 28 минут
Подумал, и понял, что для большей универсальности придется так же динамически определять и сами NODE? и их атрибуты. И это все портировать в html.

есть изменения в структуре xml.

XML
1
2
3
4
<?xml version='1.0' encoding='utf-8'?>
<world countries_cout='([0-9]+)'>
<country country_id='([0-9]+)' country_name='([\\w]+)' country_population='([0-9]+)'></country>+
</world>

Вроде тут уже проще.

Добавлено через 4 минуты

XML
1
2
3
4
5
<?xml version='1.0' encoding='utf-8'?>
<world countries_cout='([0-9]+)'>
(?:<country country_id='([0-9]+)' country_name='([\\w]+)' country_population='([0-9]+)'>
</country>)+
</world>

- структура ответа сервера. Тут уже предельно просто. сделаю выложу.

@StagnantIce · 18.04.2011, 22:56

JavaScript
1
$('country').attr('country_id')

@gGrn-7DA · 19.04.2011, 21:41 **[ТС]**

если не ошибаюсь мне выйдет атрибуты всего списка тегов country?
и обработка jQuery должна быть направленна на html-content...

Добавлено через 4 часа 26 минут
Как получить заголовок тега в xml при помощи регекса?

JavaScript
1
/(?:\<)(\w+)(?:\s+)/;

выдает бред): "<world ,world"

Добавлено через 13 минут
С этим разобрался.

JavaScript
1
/(\w+)(?=\s)/;

Жалко что нельзя поставить условие на предшествующий символ, или таки можно?

Добавлено через 41 минуту
Использованные регулярки

JavaScript
1
2
3
4
5
var regexIsCloseNode = /^\<\/\w+\>$/;
var regexIsOpenNode = /^\<[\w\s=\\\']+\>$/;
var regexGetCloseNode = /(w+)/;
var regexGetOpenNodeHead = /\w+(?=\s?)/;
var regexGetOpenNodeAttributes = /(\w+)=\'\w+\'(?=\s?)/g;

Обработка ответа сервера

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$.each( request . responseText . split( "\n" ) , function( index , value ){
    if( regexIsCloseNode . test( value ) ){
        CloseNode = regexGetCloseNode . exec( value );
        answer += "</div>\n";
    }
    else
    if( regexIsOpenNode . test( value ) ){
        OpenNode = regexGetOpenNodeHead . exec( value )
        answer += "<div class='" + OpenNode[ 0 ] + "'>\n";
        while( ( OpenNodeAttribute = regexGetOpenNodeAttributes . exec( value ) ) != null ){
            str = OpenNodeAttribute[ 0 ] . split( "=" );
            answer += "<div class='" + str[ 0 ] + "'>" + str[ 0 ] + "\t: " + str[ 1 ] . substr( 1 , str[ 1 ] . length - 2 ) + "</div>\n";
        }
    }
} );

До обработки

XML
1
2
3
4
5
6
7
8
9
10
11
<?xml version='1.0' encoding='utf-8'?>
<world i_count='4'>
<country c_id='1' c_name='first' c_population='4'>
</island>
<country c_id='2' c_name='second' c_population='4'>
</island>
<country c_id='3' c_name='third' c_population='4'>
</island>
<country c_id='4' c_name='fourth' c_population='4'>
</island>
</world>

После обработки

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class='world'>
<div class='i_count'>i_count    : 4</div>
<div class='country'>
<div class='c_id'>c_id  : 1</div>
<div class='c_name'>c_name  : first</div>
<div class='c_population'>c_population  : 4</div>
</div>
<div class='country'>
<div class='c_id'>c_id  : 2</div>
<div class='c_name'>c_name  : second</div>
<div class='c_population'>c_population  : 4</div>
</div>
<div class='country'>
<div class='c_id'>c_id  : 3</div>
<div class='c_name'>c_name  : third</div>
<div class='c_population'>c_population  : 4</div>
</div>
<div class='country'>
<div class='c_id'>c_id  : 4</div>
<div class='c_name'>c_name  : fourth</div>
<div class='c_population'>c_population  : 4</div>
</div>
</div>

остался вопрос как на htmml-content навесить обработчик клика, что бы на клик внутри тега <div class='country'></div>(в любую точку, так же и в дочерние элементы) в переменную вар вводилось country=c_id (c_id - числовое значение внутри тега <div class='c_id'>c_id : 4</div>).

две вещи не знаю:
1) - как правильно повесить обработчик?
может и $.("div.country"), но это country должно определяться динамически.
название тега может измениться, да и код должен работать на любом xml подобной структуры.
может будет не world-country, а country-town, и далее по логике...
2) - как получить 4 из "c_id : 4" знаю, а как получить это "c_id : 4"....
опять возникает сложность
В <div class='c_id'>c_id : 4</div> наверно стоит заменить c_id на id, что бы хоть его не динамически определить, но всеже и это желательно. так как в итоге могут быть и t_id и много еще чего...

Добавлено через 3 минуты
Думаю

HTML5
1
<div class='c_id'>c_id  : 4</div>

и иже с ним все подобные можно заменить на

HTML5
1
<div>c_id  :<b class='c_id'>4</b></div>

- но еще над этим стоит подумать. наверно не буду так делать...

@outoftime · 19.04.2011, 22:39

Сообщение от gGrn-7DA

остался вопрос как на htmml-content навесить обработчик клика, что бы на клик внутри тега

jquery leave - аналог click, только второй работает только над листьями который уже в ДОМ, а первый можно ставить на переменные элементов, который будут добавлены в ДОМ, читайте оф доки.

@ostgals · 19.04.2011, 23:08

Как вариант. Без регулярок. Просто загружая XML как дерево узлов.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
    $(function(){
        $.get(
            'world.xml',
            function (xml) {
                
                var $xml = $(xml);
                
                $('<div class="countries_count"/>')
                    .html($xml.find('world').attr('countries_count'))
                    .appendTo($('#world'));
                    
                $xml.find('country').each(function(i, country) {
                    
                    $div = $('<div class="country"/>');
                    $.each(['country_id', 'country_name', 'country_population'], function(i, name){
                        $('<div/>')
                            .attr('class', name)
                            .html($(country).attr(name))
                            .appendTo($div);
                    });
                    
                    $('#world').append($div);
                });
            },
            'xml'
        );
    });
</script>
 
<div id="world"></div>

XML
1
2
3
4
5
6
7
<?xml version='1.0' encoding='utf-8'?>
<world countries_count='4'>
    <country country_id='56' country_name='CountryA' country_population='700000' />
    <country country_id='58' country_name='CountryD' country_population='500000' />
    <country country_id='59' country_name='CountryR' country_population='400000' />
    <country country_id='71' country_name='CountryQ' country_population='300000' />
</world>

@gGrn-7DA · 20.04.2011, 08:35 **[ТС]**

ostgals, это преобразование html в xml?

outoftime, не особо понял твоей речи...

@Good-bad man · 20.04.2011, 10:03

Сообщение от gGrn-7DA

outoftime, не особо понял твоей речи...

http://jquery-docs.ru/Events/live/#typefn

@gGrn-7DA · 20.04.2011, 10:48 **[ТС]**

ну написал я

JavaScript
1
2
3
                    $("div.island").live( "click" , function( ){
                        alert( this . innerHTML );
                    } );

чем оно лучше?

JavaScript
1
2
3
                    $("div.island").click( function( ){
                        alert( this . innerHTML );
                    } );

и как мне найти c_id в нем???

Добавлено через 16 минут
Вот такое намутил, ено не работает. выдает HTMLDivElement, .innerHTML для него undefined... И что с ним дальше делать??

JavaScript
1
2
3
$("div.island").click( function( ){
    alert( $(this) . find( "div.i_id" ) . get( ) );
} );

$(this).innerText определено и возвращает содержание тега.

Добавлено через 4 минуты
разобрался:

JavaScript
1
2
3
4
5
$("div.island").click( function( ){
    $(this) . find( "div.i_id" ) . each(
        function( ){ alert( /\d+/ . exec( this . innerHTML ) ); }
    );
} );

Но можно ли что-нибудь по красивее придумать?
и желательно отвязаться от конкретных "div.island" и "div.i_id"...

@outoftime · 20.04.2011, 13:00

gGrn-7DA, я же сказал, надо использовать, как верно поправил Good-bad man функцию добавления обработчика на объект, которого еще нет в ДОМ, пробежаться по всем внутренним тегам и наклипать обработчиков, а после закинуть в ДОМ.

@gGrn-7DA · 20.04.2011, 16:23 **[ТС]**

ладно, допустим, оно так. но я не вижу резона в этом.
<?xml version='1.0' encoding='utf-8'?>

HTML5
1
2
3
4
5
6
<world countries_count='4'>
    <country country_id='56' country_name='CountryA' country_population='700000' />
    <country country_id='58' country_name='CountryD' country_population='500000' />
    <country country_id='59' country_name='CountryR' country_population='400000' />
    <country country_id='71' country_name='CountryQ' country_population='300000' />
</world>

это первый из возможных xml-ответов сервера. следующий будет:

HTML5
1
2
3
4
5
6
<country country_id='56' country_name='CountryA' country_population='700000'>
    <town town_id='56' town_name='townA' town_population='700000' />
    <town town_id='58' town_name='townD' town_population='500000' />
    <town town_id='59' town_name='townR' town_population='400000' />
    <town town_id='71' town_name='townQ' town_population='300000' />
</world>

Я не разбираюсь в тонкостях jQuery, я его вижу только 3-и сутки. У меня есть задача, xml преобразовать в html, повесить обработчики. Я ее решаю, за помощью обратился к вам. Сыпятся советы, а на простой вопрос

Сообщение от gGrn-7DA

чем оно лучше?

никто не ответил: делай и все.
Я не буду динамически дополнять контент, я его буду заменять, полностью. И после замены не должно остаться ни одного из определенных ранее обработчика, все они должны определиться заново. Обновления страницы перед каждой заменой не будет, всем должен заправлять JS...

Теперь вопрос, будет ли работать так, как мне надо то, что я написал. Будет ли работать так live. Если оба нет, то как сделать? Основной код я вроде уже написал, остались только эти детали...

Добавлено через 43 минуты
Подправил xml и соотвественно html-content:
xml

XML
1
2
3
4
5
6
7
8
9
10
<?xml version='1.0' encoding='utf-8'?>
<world/>
<country c_id='1' c_name='first' c_population='4'>
</country>
<country c_id='2' c_name='second' c_population='4'>
</country>
<country c_id='3' c_name='third' c_population='4'>
</country>
<country c_id='4' c_name='fourth' c_population='4'>
</country>

html

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class='country'>
<div class='c_id'>c_id : 1</div>
<div class='c_name'>c_name : first</div>
<div class='c_population'>c_population : 4</div>
</div>
<div class='country'>
<div class='c_id'>c_id : 2</div>
<div class='c_name'>c_name : second</div>
<div class='c_population'>c_population : 4</div>
</div>
<div class='country'>
<div class='c_id'>c_id : 3</div>
<div class='c_name'>c_name : third</div>
<div class='c_population'>c_population : 4</div>
</div>
<div class='country'>
<div class='c_id'>c_id : 4</div>
<div class='c_name'>c_name : fourth</div>
<div class='c_population'>c_population : 4</div>
</div>

regex

JavaScript
1
2
3
4
5
6
7
8
9
var regexIsCloseNode = /^\<\/\w+\>$/;
var regexIsOpenNode = /^\<[\w\s=\\\']+\>$/;
var regexIsHeaderNode = /^\<\w+.*\/\>$/;
var regexIsRootHeaderNode = /^\<\w+\s?\/\>$/;
var regexGetCloseNode = /(w+)/;
var regexGetOpenNodeHead = /^\<(\w+)\s?/;
var regexGetOpenNodeAttributes = /(\w+)=\'(\w+)\'\s?/g;
var regexGetHeaderNodeHead = /^\<(\w+)/g;
var regexGetHeaderNodeId = /_id=\'(\d+)\'/;

jQuery

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$.each( request . responseText . split( "\n" ) , function( index , value )
{
    if( regexIsCloseNode . test( value ) )
    {
        CloseNode = regexGetCloseNode . exec( value );
        answer += "</div>\n";
    }
    else
    if( regexIsOpenNode . test( value ) )
    {
        OpenNode = regexGetOpenNodeHead . exec( value );
        answer += "<div class='" + OpenNode[ 1 ] + "'>\n";
        while( ( OpenNodeAttrib = regexGetOpenNodeAttributes . exec( value ) ) != null )
        {
            answer += "<div class='" + OpenNodeAttrib[ 1 ] + "'>" + OpenNodeAttrib[ 1 ] + " : " + OpenNodeAttrib[ 2 ] + "</div>\n";
        }
    }
    else
    if( regexIsHeaderNode . test( value ) )
    {
        window . location . hash = regexGetHeaderNodeHead . exec( value )[ 1 ];
        if( regexIsRootHeaderNode . test( value ) ) alert;
        else
            window . location . hash += regexGetHeaderNodeId . exec( value );
    }
} );

Теперь думаю можно и live воспользовать? Обработчики событий мешать друг другу не будут?

И таки объясните особенность live? Та документация слишком уж сухая...

Добавлено через 33 минуты
Не надо пояснять, проверил уже: как и думал при предыдущем построении задачи были бы проблемы с live, но ее я устранил переделав структуру ответа.

Остается один вопрос, что еще можно сделать по-красивее, надежнее, кроссбраузернее и менее ресурсоемко?

@outoftime · 20.04.2011, 19:14

XML
1
2
3
4
5
6
7
<?xml version='1.0' encoding='utf-8'?>
<root>
<a b='1' c='first' c_population='4'></a>
<a b='2' c='second' c_population='4'></a>
<a b='3' c='third' c_population='4'></a>
<a b='4' c='fourth' c_population='4'></a>
</root>

так уменьшишь время ответа сервера, т.к. тадо будет меньше инфы тянуть, на стороне клиента в JS в данном случае оптимизиции никчему.

Сообщение от gGrn-7DA

Я не разбираюсь в тонкостях jQuery, я его вижу только 3-и сутки. У меня есть задача, xml преобразовать в html, повесить обработчики. Я ее решаю, за помощью обратился к вам. Сыпятся советы, а на простой вопрос
Сообщение от gGrn-7DA
чем оно лучше?
никто не ответил: делай и все.

Все доки которые я спользую: http://docs.jquery.com/Main_Page
Отсюда вывод: "самому писать не хочется, пускай мне напишут"

@ostgals · 20.04.2011, 19:15

Сообщение от gGrn-7DA

ostgals, это преобразование html в xml?

Наоборот. Внешний XML файл -> в HTML через AJAX.

@gGrn-7DA · 20.04.2011, 20:52 **[ТС]**

outoftime, думать надо прежде чем писать. если посмотришь я все сам написал. А если бы мне помогли затратил бы раз в 10 меньше времени с тем же абсолютно результатом, разве "+" бы раздал...

Названия тегов для меня имеют значение, и потому сокращать ничего не буду. Я и так раза в 2 сжал данные, а захочет кто написать клиентский модуль в сайту, ему идти в доки вкуриваться что это за a,a1,a2,a3,b,zg?

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

Все доки которые я спользую:

так там не просто доки, там целый портал со множеством ссылок на все что касается jQuery. Качественно, но нет столько сремени на изучение. (cat > /dev/null)

Добавлено через 1 минуту
ostgals, у тебя небольшой минус в том, что результат всецело зависит от данных...
мне же надо универсальный, что я и написал, и структуру xml изменил немного... Если есть желание испарвить эти 2 момента буду благодарен)

@ostgals · 20.04.2011, 21:47

Сообщение от gGrn-7DA

мне же надо универсальный, что я и написал

В чем его универсальность?

@gGrn-7DA · 21.04.2011, 08:52 **[ТС]**

он не зависит от того как теги названы. у тебя же я вижу world и country.
Мне надо отвязаться от этих слов...

Новые блоги и статьи Все статьи Все блоги /
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Нашел на реддите интересную статью под названием «Кто-нибудь знает, где получить бесплатный компьютер или. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .

@gGrn-7DA мну довольно <(-__-)l 217 / 206 / 15 Регистрация: 17.01.2010 Сообщений: 2,462
	20.04.2011, 08:35 [ТС]
	ostgals, это преобразование html в xml? outoftime, не особо понял твоей речи... 0

@outoftime ║XLR8║ 1212 / 909 / 270 Регистрация: 25.07.2009 Сообщений: 4,360 Записей в блоге: 5
	20.04.2011, 13:00
	gGrn-7DA, я же сказал, надо использовать, как верно поправил Good-bad man функцию добавления обработчика на объект, которого еще нет в ДОМ, пробежаться по всем внутренним тегам и наклипать обработчиков, а после закинуть в ДОМ. 0

@gGrn-7DA мну довольно <(-__-)l 217 / 206 / 15 Регистрация: 17.01.2010 Сообщений: 2,462
	21.04.2011, 08:52 [ТС]
	он не зависит от того как теги названы. у тебя же я вижу world и country. Мне надо отвязаться от этих слов... 0