Предишна/следваща обработка на низове в Javascript?

Опитвам се да направя бутон предишен/следващ за мой проект. Ето съкратен код за него.

<html>
<head>
<script>
function prevP() {var element = document.getElementById("framePage");
             element = element.src;
             elementLen = element.length;
             elementLen = elementLen-6;
             elementChar = element.charAt(elementLen)
             elementChar = --elementChar
             newElement = element.replace(element.charAt(elementLen),elementChar);
             document.getElementById("framePage").src=(newElement);}

function nextP() {var element = document.getElementById("framePage");
             element = element.src;
             elementLen = element.length;
             elementLen = elementLen-6;
             alert(elementLen);
             elementChar = element.charAt(elementLen)
             elementChar = ++elementChar
             newElement = element.replace(element.charAt(elementLen),elementChar);
             document.getElementById("framePage").src=(newElement);}
</script>
</head>
<body>
<iframe src="www.websiteendingwithnumber1.com" id="framePage"></iframe>
</br>
<input type="button" onClick="prevP()" value="Previous">
<input type="button" onClick="nextP()" value="Next">
</body>
</html>

Моят проект създава приблизително 40-120 html страници за показване в iframe. Използвате бутона Предишен/Следващ, за да ги прелистите. Всяка страница е динамично наименувана с номер в края. Например /path/mountpoint0/page/page0.html, page1.html ... page5.html, така нататък и така нататък. Това, което се опитвам да направя, е основно да накарам всяка от тези функции да прочете текущия URL адрес на iframe src, след което да го зададе на желания src в зависимост от бутона, който натискате. По принцип, ако сте на страница 5, тя ще раздели низа и ще зададе src на страница 4, ако натиснете предишна, страница 6, ако сте следваща и т.н. и т.н.

Едно предупреждение! Имам и динамично генерирана точка на монтиране (ramdisk) за динамично генерираните iframe HTML файлове. Моят проект ще открие дали съществува точка на монтиране и съответно ще преименува на нова точка на монтиране, т.е. ако mountpnt0 съществува, създайте и използвайте mountpnt1, така нататък и така нататък, докато може. ТАКА! Грешката, която виждам, е, че променя номера на точката на монтиране, а не html файла. Пример iframe.src = /tmp/prevram0/html/page0.html. Щраквам върху следващия, хвърля ме към страница, която не е намерена грешка и се опитва да отиде на /tmp/prevram1/html/page0.html. Отново натискам next и след това той обръща другия номер, /tmp/prevram1/html/page1.html. Желаната операция ще бъде iframe.src = /tmp/prevram0/html/page0.html. Щраквам върху следващия, след което задава iframe.src на /tmp/prevram0/html/page1.html.

Съжалявам, ако това е объркано или няма много смисъл. По-голямата част от този проект е в Python и аз се стремя да използвам HTML/JS, за да създам функцията за отчитане на моя проект. Сравнително нов съм в Python, познавам го достатъчно прилично, но JS е изцяло нов за мен, така че се извинявам за всичките си (вероятни) главоболия, причиняващи грешки на noob. Но наистина бих искал някаква насока и насоки как най-добре да се справя с този проблем :)

Благодаря много на всички!

РЕДАКТИРАНЕ - Бързо уточнение.

РЕДАКТИРАНЕ 2 - Искам да благодаря на всички за страхотния им принос досега! Наистина, НАИСТИНА го оценявам! В момента се занимавам с някои неща по време на работа, така че когато имам възможност да седна с проекта си още малко, ще изпробвам вашите предложения и ще видя какво ще излезе :) Благодаря ви отново, момчета (и момичета?)!

РЕДАКТИРАНЕ 3 - window.onload = function(){ pageNo = 0; baseUrl = document.getElementById('+q1+'baseurl'+q1+').innerHTML; }

window.onload = function(){
lPageNo = document.getElementById('+q1+'lPageNo'+q1+').innerHTML;
}

function prevP() {
if(pageNo > 1) { pageNo--; } 
var prevEl = document.getElementById('framePage'); 
prevEl.src = baseUrl + pageNo + '.html';
}

function nextP() {
if(pageNo<lPageNo) { pageNo++; }
var nextEl = document.getElementById('framePage');
nextEl.src = baseUrl + pageNo + '.html';
}

<span id="baseurl" style="display:none;">'+prevram+'/html/page</span>

<span id="lPageNo" style="display:none;">'+str(ptit)+'</span>

(prevram, q1 и ptit са променливи на python в моя скрипт на python. prevram е точката на монтиране, а ptit е броячът на номерата на страниците. q1 е единична кавичка.)


person 0xhughes    schedule 02.11.2012    source източник
comment
Err... можете ли да поясните кога се определя точката на монтиране? Прави ли се чрез javascript или от страна на сървъра?   -  person user1600124    schedule 02.11.2012
comment
@user1600124 - Този скрипт всъщност се изпълнява на локална машина. Това е скрипт на Python и генерира и монтира точката на монтиране. Друга част от скрипта генерира уеб страницата и JS, съдържащи се в нея, които ви показват резултатите от това, което е направил скриптът на python, така че скриптът на python определя точката на монтиране на вашата локална машина и я монтира. - Редактирайте за пояснение.   -  person 0xhughes    schedule 02.11.2012
comment
съжалявам, бях далеч от компютъра през уикенда.. Мога ли да попитам защо използвахте document.getElementById('+q1+'lPageNo'+q1')? Тъй като идентификаторът на обхвата е просто lPageNo... е '+q1+' = ''?   -  person user1600124    schedule 04.11.2012
comment
@user1600124 Съжалявам, копирах и поставих от моя скрипт. Това е присвояване на променлива на Python, трябваше да използвам променливи за единичните кавички, така че да не разбие присвояването на променливата ми, тъй като е обвито в единични кавички.   -  person 0xhughes    schedule 04.11.2012
comment
@user1600124 Разбрах, виж отговора си ;) Благодаря!   -  person 0xhughes    schedule 05.11.2012


Отговори (2)


Ако приемем, че вашата точка на монтиране се определя от сървъра, бих опитал по следния начин: Скрийте елемент в страницата, съдържащ основен низ:

<span id="base" style="display:none;">/tmp/prevram0/html/page</span>

След това свържете манипулатор към събитие за зареждане, за да получите тази информация:

window.onload= function ()
{
    baseString = document.getElementById('base').innerHTML;
    document.getElementById('framePage').src = baseString + pageNo + '.html';

}

Където baseString е променлива, дефинирана някъде във вашия код, която е глобално достъпна за тези функции. И pageNo е друга променлива, предварително дефинирана с начален номер на страница.

Тогава функцията на предишната страница:

function PrevP()
{
    if(pageNo > 1)
    {
         pageNo--;
    }
    var el = document.getElementById('framePage');
    el.src = baseString + pageNo + '.html';
}

Функцията за следваща страница просто добавяте pageNo нагоре и правите същото:

function NextP()
{
    if(pageNo<lastPageNo)
    {
          pageNo++;
    }
    var el = document.getElementById('framePage');
    el.src = baseString + pageNo + '.html';
}
person user1600124    schedule 02.11.2012
comment
Благодаря и за вашия принос :) Този код ми изглежда доста приятелски настроен, ще го пробвам за размер и ще докладвам резултатите! Благодаря много отново. - person 0xhughes; 04.11.2012
comment
Пробвах кода ви, промених го малко, ВЕРОЯТНО го прецакахте, редактиране 3 съдържа функциите и HTML, не работи, опитах се да поставя някои JS сигнали в следващата и предишната функция, за да видя дали нещо е неправилно, но сигналите дори не се появиха. Съжалявам, че ви досаждам! - person 0xhughes; 04.11.2012
comment
Направих го, единичните кавички бяха объркани в една от моите декларации на променливи на python и една от моите променливи на java не съответстваше. Благодаря милион потребител! - person 0xhughes; 05.11.2012

Методът String на JavaScript .replace() търси изходния низ, търсейки за всичко, което подадете в първия параметър. Ако този първи параметър е низ, той замества само първия му екземпляр. Ако този първи параметър е регулярен израз, можете да правите по-сложни съвпадения на шаблони и глобални замени. Ако вторият параметър е функция, можете да правите още по-сложни замени: функцията ще бъде извикана за всяко съвпадение, което ви позволява да обработвате всяко съвпадение, както сметнете за добре, и да върнете заместващата стойност - което е идеално за вашия случай, когато искате да увеличаване или намаляване на число.

Опитайте тази:

function prevP() {
    var element = document.getElementById("framePage");

    element.src = element.src.replace(/(\d+)(.html$)/,
                                  function(m,p1,p2){ return (+p1) -1 + p2; });
}
function nextP() {
    var element = document.getElementById("framePage");

    element.src = element.src.replace(/(\d+)(.html$)/,
                                  function(m,p1,p2){ return (+p1) +1 + p2; });
}

Регулярният израз, който използвах, търси цифри, последвани от .html в края на изходния низ, така че във вашия случай с низ във формата /tmp/prevram0/html/page0.html той ще намери само второто 0. Обратното извикване във втория параметър преобразува цифровия низ в число с помощта на унарния оператор плюс, изважда или добавя 1 към него и след това връща .html бита обратно.

Обърнете внимание, че това не прави никаква проверка на диапазона, така че ще продължи да се опитва да отиде преди, дори когато вече е на 0.

Демо: http://jsfiddle.net/3VFvz/

Някои други съвети относно вашия код:

  • Освен element, всички ваши променливи са глобални, защото не са декларирани в оператор var.
  • .charAt() връща низ, така че няма смисъл да използвате оператора -- върху резултата.
  • Можете да кажете elementLen = element.length - 6, не е нужно да правите частта -6 като отделен израз.
  • По-нормален JS стил е да поставите първия ред от тялото на функцията на реда след { и да поставите затварящия } на функцията на собствен ред - с изключение, вероятно, на наистина кратки функции, които са изцяло на един ред, както по-горе в моя отговор.
person nnnnnn    schedule 02.11.2012
comment
Мислех повече за това да имам baseString = /tmp/prevram0/html/page. След това var pageNo = на каквато и страница да сте... тогава просто задавате src = baseString + pageNo.toString() + '.html'... - person user1600124; 02.11.2012
comment
@user1600124 - Разбира се, това също би свършило работа и би улеснило добавянето на проверки на обхвата за първата и последната страница - публикувайте го като отговор. (Имайте предвид, че нямате нужда от .toString() във вашия пример.) - person nnnnnn; 02.11.2012
comment
Хей, благодаря ви за отговора! Вашият код най-вече има смисъл за мен, с изключение на частите функция (m,p1,p2). Оператори m, p1 и p2 ли са? Никъде не ги виждам декларирани като променливи, така че не съм сигурен какво означават те! Съжалявам, пълен JS noob! Това, което казахте за замяната, има пълен смисъл, дори това, което започнах да подозирам, че не работи правилно :) Благодаря ви отново за приноса. - person 0xhughes; 04.11.2012
comment
m, p1 и p2 са функционални параметри - тяхната декларация е в частта function(m,p1,p2). Тази анонимна функция се предава като параметър на метода replace() като обратно извикване - тя ще бъде извикана от replace() за всяко съвпадение, където m ще бъде цялото съвпадение, а p1, p2 и т.н. ще бъдат подсъвпаденията, така че може да обработва всяка съвпадаща(и) стойност(и). Каквато и стойност да върне тази функция, става заместваща стойност за текущото съвпадение. - person nnnnnn; 04.11.2012
comment
@nnnnnn Сега има смисъл за мен, благодаря за разяснението :) - person 0xhughes; 10.11.2012
comment
Никога не ми е хрумвало, че вторият параметър може да е функция - това отваря нови възможности, благодаря, - person zer00ne; 17.01.2017