logo标签列表

解释javascript中的image.src.match

javascripthtmlimagetogglematch
6

我在跟随这个教程学习时，发现一些JavaScript代码很难理解。

教程链接

http://www.w3schools.com/js/tryit.asp?filename=tryjs_lightbulb

需要澄清的代码

<script>
function changeImage() {
    var image = document.getElementById('myImage');
    if (image.src.match("bulbon")) {
        image.src = "pic_bulboff.gif";
    } else {
        image.src = "pic_bulbon.gif";
    }
}
</script>

我不理解image.src.match中的MATCH实际含义。 它是否具有切换动作。 我找不到任何有用的文章。

3
请点击此处阅读 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/match 。 - elclanrs
6个回答
7

好的，@elclanrs已经提供了String.prototype.match()的解释链接。然而，下面是一个能够让您更加清晰理解一些事情的答案。

HTML:

<img id="myImage" src="http://www.w3schools.com/js/pic_bulbon.gif" />

JavaScript:

// capture the image
var image = document.getElementById('myImage');

console.log(image.src);                                // http://www.w3schools.com/js/pic_bulbon.gif
console.log(image.src.match("word-not-in-src-name"));  // null
console.log(image.src.match("bulbon"));                // ["bulbon", index: 32, input: "http://www.w3schools.com/js/pic_bulbon.gif"] 

// image.src.match("bulbon") will return an Array, but it evaluates true in JavaScript
// This is the reason why "Evaluates true!" is printed out to console
if(image.src.match("bulbon")) {
    console.log("Evaluates true!");
}

// To prove my point, "Empty array!" also will be printed out to console
if([]) {
    console.log("Empty array!");
}

您可以从以下 JSFIDDLE EXAMPLE 中自己查看： JS FIDDLE EXAMPLE 因此，要回到您的代码示例中：
if (image.src.match("bulbon")) {
    image.src = "pic_bulboff.gif";
} else {
    image.src = "pic_bulbon.gif";
}

这意味着，如果当前图片的 src属性中包含“bulbon”这个单词，将会把图片更改为pic_bulboff.gif ，因为代码执行将进入 if 块，因为 image.src.match("bulbon")将返回一个数组（如在上面的示例中所示，并在文档中解释）。祝贺你，希望你现在知道如何检查某些单词是否是字符串的一部分了 :)
7
1

.match 简单地表示测试字符串是否与正则表达式匹配，在这种情况下是 bulbon 匹配 image.src = "pic_bulbon.gif"; 如果匹配表示灯泡亮着，因此关闭，如果它关闭，则 else 语句使其再次打开，就这样。

0
function myFunction() {
    var x, text;
    // Get the value of the input field with id="numb"
    x = document.getElementById("numb").value;
    // If x is Not a Number or less than one or greater than 10
    if (isNaN(x) || x < 1 || x > 10) {
        text = "Input not valid";
    } else {
        text = "Input OK";
    }
    document.getElementById("demo").innerHTML = text;
}
0

image.src.match 的作用是确认图像源文件名是否匹配某个内容，这里是“bulbon”

如果匹配（"if"），将运行一段代码块；如果不匹配，则运行另一个代码块（"else"）

-2
答案很简单，脚本只验证图像属性的状态，如果它是打开的，则将其关闭，反之亦然，如果它是关闭的，则将其打开！
该脚本定义了图像名称的初始值，在这种情况下为“buldon”，并控制其状态。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接