上一个/下一个 Javascript 字符串处理？答案

【问题标题】：Previous/Next Javascript String Handling?上一个/下一个 Javascript 字符串处理？
【发布时间】：2012-11-02 03:26:16
【问题描述】：

我正在尝试为我的项目制作上一个/下一个按钮。这是它的精简代码。

<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 等等。我试图做的基本上是让这些函数中的每一个读取 iframe src 的当前 URL，然后根据您按下的按钮将其设置为所需的 src。基本上，如果您在第 5 页，它会将字符串切分，如果您点击上一个，则将 src 设置为 page4，如果您点击下一个，则将 src 设置为 page6，等等。

警告！对于动态生成的 iframe HTML 文件，我还有一个动态生成的挂载点 (ramdisk)。我的项目将检测是否存在挂载点并相应地重命名为新的挂载点，IE 如果 mountpnt0 存在，则创建并使用 mountpnt1，依此类推，直到可以为止。所以！我看到的错误是它更改了挂载点上的数字，而不是 html 文件。示例 iframe.src = /tmp/prevram0/html/page0.html。我单击下一步，将我吐到一个找不到页面的错误，并试图转到 /tmp/prevram1/html/page0.html。我再次点击下一个，然后它翻转另一个数字，/tmp/prevram1/html/page1.html。所需的操作是 iframe.src = /tmp/prevram0/html/page0.html。我单击下一步，然后将 iframe.src 设置为 /tmp/prevram0/html/page1.html。

如果这令人费解或没有多大意义，我很抱歉。这个项目的大部分内容都在 python 中，我希望使用 HTML/JS 来创建我的项目的报告功能。我对 python 还很陌生，对我的方法很了解，但是 JS 对我来说是全新的，所以我为我所有的（可能的）头痛导致菜鸟错误道歉。但我真的很想要一些关于如何最好地处理这个问题的方向和指导:)

非常感谢大家！

编辑 - 快速澄清。

编辑 2 - 我要感谢大家迄今为止的大力投入！我真的，真的很感激！我现在正在处理工作中的一些事情，所以当我有机会再坐下来处理我的项目时，我会尝试你的建议，看看会发生什么:) 再次感谢大家（和女孩？）！

编辑 3 - window.onload = 函数（）{ 页号 = 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 是单引号。）

【问题讨论】：

Err... 您能否澄清一下何时确定挂载点？它是通过javascript完成的，还是在服务器端完成的？
@user1600124 - 这个脚本实际上是在本地机器上运行的。它是一个 python 脚本，它生成并挂载挂载点。脚本的另一部分生成网页和其中包含的 JS，其中显示了 python 脚本所做的结果，因此 python 脚本确定本地计算机上的挂载点并挂载它。 - 编辑澄清。
抱歉，周末不在电脑前。请问您为什么使用 document.getElementById('+q1+'lPageNo'+q1')？因为 span id 只是 "lPageNo"... 是 '+q1+' = '"'？
@user1600124 抱歉，我从我的脚本中复制并粘贴了。那是 python 变量赋值，我必须为单引号使用变量，这样它就不会破坏我的变量赋值，因为它被包裹在单引号中。
@user1600124 知道了，参考你的答案；）谢谢！

标签： javascript button iframe src

【解决方案1】：

JavaScript 的字符串.replace() method 搜索源字符串以查找您在第一个参数中传递的任何内容。如果第一个参数是一个字符串，那么它只会替换它的第一个实例。如果第一个参数是正则表达式，您可以进行更复杂的模式匹配和全局替换。如果第二个参数是一个函数，您可以进行更复杂的替换：将为每个匹配调用该函数，允许您处理每个匹配，但您认为合适并返回替换值 - 这非常适合您想要的情况增加或减少一个数字。

试试这个：

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 形式的字符串，它会找到 only第二个0。第二个参数中的回调使用一元加号运算符将数字字符串转换为数字，对其进行减法或加法运算，然后将.html 位放回。

请注意，这不会进行任何范围检查，因此即使已经为 0，它也会继续尝试前进。

演示：http://jsfiddle.net/3VFvz/

关于您的代码的其他一些提示：

除了element，所有变量都是全局变量，因为它们没有在var 语句中声明。
.charAt() 返回一个字符串，因此在结果上使用 -- 运算符没有意义。
您可以说elementLen = element.length - 6，您不需要将-6 部分作为单独的语句。
将函数体的第一行放在{之后的行之后，将函数的结束}放在自己的行上是一种更正常的JS风格-除了，可能，对于我的回答中完全在一行上的非常短的功能。

【讨论】：

我更多地考虑使用 baseString = "/tmp/prevram0/html/page"。然后一个 var pageNo = 你在什么页面上......然后你只需设置 src = baseString + pageNo.toString() + '.html'...
@user1600124 - 当然，这也可以，并且可以更轻松地为第一页和最后一页添加范围检查 - 将其发布为答案。（请注意，您的示例中不需要 .toString()。）
您好，谢谢您的回复！除了函数（m，p1，p2）部分之外，您的代码对我来说最有意义。是 m、p1 和 p2 运算符吗？我没有看到它们在任何地方被声明为变量，所以我不确定这些是什么意思！对不起，总JS菜鸟！你所说的替换完全有道理，甚至我开始怀疑它工作不正常:) 再次感谢你的输入。
m、p1 和 p2 是函数参数 - 它们的声明在 function(m,p1,p2) 部分。该匿名函数作为参数传递给replace() 方法作为“回调” - 它将由replace() 为每个匹配调用，其中m 将是整个匹配，p1、p2、等，将是子匹配，因此它可以处理匹配的任何值。该函数返回的任何值都将成为当前匹配项的替换值。
@nnnnnn 这对我来说很有意义，谢谢你的澄清:)

【解决方案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';
}

【讨论】：

也感谢您的输入 :) 这段代码对我来说看起来很友好，我会试一试它的大小并报告结果！再次感谢。
试过你的代码，稍微调整了一下，可能搞砸了，编辑 3 包含函数和 HTML，它不起作用，我尝试在下一个和上一个中放入一些 JS 警报功能以查看某些内容是否格式错误，但警报甚至没有出现。不好意思打扰你了！
我让它工作了，我的一个 python 变量声明中的单引号被弄乱了，我的一个 java 变量不匹配。感谢一百万用户！