Javascript lastIndexOf尾随URL

Question

我试图检查网址的lastIndexOf是否不包含/index.htm或/index.html，如下所示：

• 提醒：www.example.com/this/is/a/test /
• 提醒：www.example.com/this/is/a/test

在这些情况下没有提醒：

• www.example.com/this/is/a/test/index.htm
• www.example.com/this/is/a/test/index.html
• www.example.com/this/is/a/test/helloworld.htm
• www.example.com/this/is/a/test/helloworld.html
• www.example.com/this/is/a/test/helloworld.php
• www.example.com/this/is/a/test/helloworld.whatever

我认为这可以做到，但它总是在解雇：

var url = "www.example.com/this/is/a/test/index.htm";
var path = window.location.pathname;

var path = url.split('/').slice(-2).join('/');
if(!path.lastIndexOf('.htm') >= 0){
   alert(path+' .htm is missing')
}   

演示：http://jsfiddle.net/un11awLx/1/

Answer 1

虽然您已经接受了答案，但我建议您将代码更改为以下内容（假设使用现代浏览器）：

// creating a named function,
// haystack: String, the string we're looking at,
// needles: Array, containing the strings you want to see
//          if the haystack ends with:
function endsIn(haystack, needles) {
  // using Array.prototype.some() to see if some/any
  // of the needles are found in the haystack, returning true
  // if the assessment within the function returns at least one
  // true/truthy value:
  return needles.some(function(needle) {
    // using String.prototype.endsWith() to see if the supplied
    // string (needle) is found in the haystack string,
    // endsWith() returns a Boolean true if the haystack does 
    // end with the needle, false otherwise:
    return haystack.endsWith(needle);
  });
}

// creating an array of the <li> elements, using Array.prototype.slice()
// and Function.prototype.call(), along with document.querySelectorAll()
// to retrieve the nodeList of <li> elements to be converted to an array:
var listItems = Array.prototype.slice.call(document.querySelectorAll('li'), 0);

// iterating over that array of <li> elements:
listItems.forEach(function(li) {
  // the first argument to the anonymous function (here 'li', but the
  // name is irrelevant) is the array-element over which we're iterating.

  // here we set the borderColor to green (if the text of the <li> does
  // end with either 'index.htm' or 'index.html', so the function returns
  // true) or to red if the string does not end in those strings (and the
  // function returns false):
  li.style.borderColor = endsIn(li.textContent, ['index.htm', 'index.html']) ? 'green' : 'red';
  // logging the text to the console, and an appropriate message
  // (based on an imperfect understanding of your question), rather than
  // multiple alerts (which are just annoying, diagnostically):
  console.log(li.textContent, " - ", endsIn(li.textContent, ['index.htm', 'index.html']) ? "Well done!" : "Where's the 'index.html'?");
});

function endsIn(haystack, needles) {
  return needles.some(function(needle) {
    return haystack.endsWith(needle);
  });
}

var listItems = Array.prototype.slice.call(document.querySelectorAll('li'), 0);

listItems.forEach(function(li) {
  li.style.borderColor = endsIn(li.textContent, ['index.htm', 'index.html']) ? 'green' : 'red';
  console.log(li.textContent, " - ", endsIn(li.textContent, ['index.htm', 'index.html']) ? "Well done!" : "Where's the 'index.html'?");
});

li {
  border-bottom: 2px solid #000;
  margin: 0 0 0.5em 0;
}

<ol>
  <li>www.example.com/this/is/a/test/index.htm</li>
  <li>www.example.com/this/is/a/test/index.html</li>
  <li>www.example.com/this/is/a/test/helloworld.htm</li>
  <li>www.example.com/this/is/a/test/helloworld.html</li>
  <li>www.example.com/this/is/a/test/helloworld.php</li>
  <li>www.example.com/this/is/a/test/helloworld.whatever</li>
</ol>

或者，使用正则表达式方法（这是一个更冗长，但可能更有用的跨浏览器）：

function endsIn(haystack, needles) {
  // initialising an (empty) array:
  var regexes = [];
  // iterating over the array of needles:
  needles.forEach(function(needle) {
    // creating regular expressions from the needles, after escaping
    // potential regular-expression special characters (such as the
    // period included in the string 'index.html'), and appending the
    // '$' (to search that the string ends with that string):
    regexes.push(new RegExp(needle.replace(/[.?*+^$[\]\\(){}|-]/g, "\\$&") + '$', 'i'));
  });

  // iterating over the array of regular expressions:
  return regexes.some(function(reg) {
    // again, the first argument (here: 'reg') is the array-element,
    // and we're using RegExp.prototype.test() (which returns a
    // Boolean true if the supplied string (haystack) matches
    // the regular expression):
    return reg.test(haystack);
  });

}

var listItems = Array.prototype.slice.call(document.querySelectorAll('li'), 0);

listItems.forEach(function(li) {
  li.style.borderColor = endsIn(li.textContent, ['index.htm', 'index.html']) ? 'green' : 'red';
  console.log(li.textContent, " - ", endsIn(li.textContent, ['index.htm', 'index.html']) ? "Well done!" : "Where's the 'index.html'?");
});

function endsIn(haystack, needles) {
  var regexes = [];
  needles.forEach(function(needle) {
    regexes.push(new RegExp(needle.replace(/[.?*+^$[\]\\(){}|-]/g, "\\$&") + '$', 'i'));
  });

  return regexes.some(function(reg) {
    return reg.test(haystack);
  });

}

var listItems = Array.prototype.slice.call(document.querySelectorAll('li'), 0);

listItems.forEach(function(li) {
  li.style.borderColor = endsIn(li.textContent, ['index.htm', 'index.html']) ? 'green' : 'red';
  console.log(li.textContent, " - ", endsIn(li.textContent, ['index.htm', 'index.html']) ? "Well done!" : "Where's the 'index.html'?");
});

li {
  border-bottom: 2px solid #000;
  margin: 0 0 0.5em 0;
}

<ol>
  <li>www.example.com/this/is/a/test/index.htm</li>
  <li>www.example.com/this/is/a/test/index.html</li>
  <li>www.example.com/this/is/a/test/helloworld.htm</li>
  <li>www.example.com/this/is/a/test/helloworld.html</li>
  <li>www.example.com/this/is/a/test/helloworld.php</li>
  <li>www.example.com/this/is/a/test/helloworld.whatever</li>
</ol>

参考文献：

• Array.prototype.forEach()。
• Array.prototype.slice()。
• Array.prototype.some()。
• document.querySelectorAll()。
• Function.prototype.call()。
• JavaScript Regular Expressions Guide。
• new RegExp() constructor。
• RegExp.prototype.test()。
• String.prototype.endsWith() ^{compatibility}
• String.prototype.replace()。

Answer 2

只需替换

if(!path.lastIndexOf('.htm') >= 0)

要

if(!(path.lastIndexOf('.htm') >= 0))

每次都会触发，因为js引擎首先计算！path.lastIndexOf（'。htm'）然后将结果与0进行比较

例如.htm的索引是10

第一次计算是！10并且结果为false（这里是10次投射到布尔）

第二次操作：false＆gt; = 0（false强制转换为0且条件为真）

Answer 3

如果你想保持你的代码是这样的，只需添加一些括号：

if(! (path.lastIndexOf('.htm') >= 0) ){
   alert(path+' .htm is missing')
} 

在您当前的示例中，如果您替换实际值，您将看到发生了什么。你最终得到这样的东西：

if( ! 10 >= 0 )

if( false >= 0 )

if( true )

添加括号将为您提供预期结果：

if( ! ( 10 >= 0 ) )

if( ! ( true )

if( false )

Answer 4

您没有正确实施它。以下是两个更好的解决方案：

var url = "www.example.com/this/is/a/test/index.html";
var path = window.location.pathname;

var paths = url.split('/');
var lastItem = paths[paths.length-1];
/* Solution 1 */
if(lastItem.indexOf('.htm') < 0){
   alert(path+' .htm is missing')
}
/* Solution 2 */
if(url.indexOf('.htm')<0){
     alert('missing .htm');   
}

Answer 5

您必须使用正则表达式而不是indexOf。否则，您需要列出所有可能的文件扩展名。

var strings = [
  "www.example.com/this/is/a/test/",
  "www.example.com/this/is/a/test",
  "www.example.com/this/is/a/test/index.htm",
  "www.example.com/this/is/a/test/index.html",
  "www.example.com/this/is/a/test/helloworld.htm",
  "www.example.com/this/is/a/test/helloworld.html",
  "www.example.com/this/is/a/test/helloworld.php",
  "www.example.com/this/is/a/test/helloworld.whatever"
]
// Ends with .xxxxxxxxxxxx
var regex = /\.[a-zA-Z]+$/;

for (var i = 0; i < strings.length; i++) {

  console.log(strings[i], regex.test(strings[i]))
}