Explain image.src.match in javascript

Question

I followed this tutorial and I found that javascript code is hard to understand.

Tutorial Link

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

Code I need to clarify

<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> 

I do not understand what MATCH means (in image.src.match). This is something that leads to a switch. I could not find a useful article for this.

Answer 1

Well, @elclanrs already provided a link to explain String.prototype.match() . However, below is an answer that clarifies you some things.

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!"); } 

You can verify this by following JS FIDDLE EXAMPLE

Therefore, to return to the sample code:

 if (image.src.match("bulbon")) { image.src = "pic_bulboff.gif"; } else { image.src = "pic_bulbon.gif"; } 

.. means that if the word bulbon is in the current attribute image src , the image will be changed to pic_bulboff.gif because execution will move inside the if block, because image.src.match("bulbon") will return Array (as shown in my example above is explained in docs ).

I welcome you, I hope that now you will understand how to check whether some word will be part of the line in the future :)

Answer 2

.match() checks if a given string matches a regular expression.

In your example, it checks if image.src contains the string "bulbon" .

If there is a match, it changes image.src to "pic_bulboff.gif"

For more information about this feature, I recommend:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match

Answer 3

.match simply means that the test, to see the weather, matches the regular expression in this case bulbon image.src = "pic_bulbon.gif"; if it matches, then the light is off, and if you turn it off with the else statement, it will turn it on again.

Answer 4

 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; } 

Answer 5

image.src.match just wants to confirm that the name of the original image file matches something, in this case "bulbon"

if it matches ("if"), a code block will be launched; if it is not executed, another code block will be executed ("else")

Answer 6

the answer is simple, the script only checks the state of the atributte image if it is turned on, then turns it off and viseversa if it is turned off !, it will turn it on!

scripts determine the initial value of the image name, in this case "buldon", and control its state.