Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > regex question - trying to find ".mp3" in a SELECT box

Reply
Thread Tools

regex question - trying to find ".mp3" in a SELECT box

 
 
Jake Barnes
Guest
Posts: n/a
 
      05-30-2006
I've a form for creating podcast episodes. The user can pick an MP3
from a drop down box (an HTML select box). I'm trying to add some error
checking. In the code below, I try to get the value of the select box,
and then I try to see if it contains the string ".mp3". I'm getting the
alert message every time. Why is that?


var inputToCheckReference =
document.getElementById(idOfFirstInputThatWeShould CheckString);
if (inputToCheckReference != false && inputToCheckReference !=
undefined) {
var valueOfInputToCheckString = inputToCheckReference.value;


var regXString = characterThatsNeededForThisField;
var regX = new RegExp(regXString, "g");
var results = valueOfInputToCheckString.match(regX);

var resultsTypeof = typeof(results);

if (resultsTypeof != Array) {


} else {
alert("No mp3s");
}




The HTML on the source code looks like this:




<tr>
<td valign="top"><h3>Choose your media file to
Podcast...</h3></td>

<td><select name="formInputs[cbLinksToWhatUrl]"
id="browseserver"><option selected>-No choice made-</option>
<option value="petrol.mp3">petrol.mp3 - 4168 k</option>
<option
value="found_you_abel_and_sophia.mp3">found_you_ab el_and_sophia.mp3 -
3288 k</option>
<option value="CrowdedHouse_LockedOut.mp3">CrowdedHouse_Lo ckedOut.mp3
- 3156 k</option>
<option
value="CrowdedHouse_LockedOut_12_05_06_-_05_05_52.mp3">CrowdedHouse_LockedOut_12_05_06_-_05_05_52.mp3
- 3156 k</option>
<option
value="CrowdedHouse_LockedOut_12_05_06_-_05_05_27.mp3">CrowdedHouse_LockedOut_12_05_06_-_05_05_27.mp3
- 3156 k</option>

<option
value="CrowdedHouse_LockedOut_15_05_06_-_06_05_21.mp3">CrowdedHouse_LockedOut_15_05_06_-_06_05_21.mp3
- 3156 k</option>
<option
value="nouvellevague_dancingwithmyself.mp3">nouvel levague_dancingwithmyself.mp3
- 4562 k</option>
<option value="Shadowshorter.wmv">Shadowshorter.wmv - 971 k</option>
<option value="mybrother.mp3">mybrother.mp3 - 3263 k</option>
<option
value="DontForgetWhereYourFrom.mp3">DontForgetWher eYourFrom.mp3 - 13742
k</option>
<option
value="mybrother_25_05_06_-_06_05_28.mp3">mybrother_25_05_06_-_06_05_28.mp3
- 3263 k</option>

<option
value="mybrother_30_05_06_-_02_05_04.mp3">mybrother_30_05_06_-_02_05_04.mp3
- 3263 k</option></select></td>
</tr>

 
Reply With Quote
 
 
 
 
Randy Webb
Guest
Posts: n/a
 
      05-30-2006
Jake Barnes said the following on 5/30/2006 5:00 PM:
> I've a form for creating podcast episodes. The user can pick an MP3
> from a drop down box (an HTML select box). I'm trying to add some error
> checking. In the code below, I try to get the value of the select box,
> and then I try to see if it contains the string ".mp3". I'm getting the
> alert message every time. Why is that?


var selectValue = document.forms['formID'].elements['selectName'.value;

if (selectValue.indexOf('.mp3') != -1){
alert('Your value has .mp3 in it')
}
else{
alert('Your value does not have .mp3 in it')
}

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
 
Reply With Quote
 
 
 
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      05-31-2006
Jake Barnes wrote:

> I've a form for creating podcast episodes. The user can pick an MP3
> from a drop down box (an HTML select box). I'm trying to add some error
> checking. In the code below, I try to get the value of the select box,
> and then I try to see if it contains the string ".mp3". I'm getting the
> alert message every time. Why is that?
>
>
> var inputToCheckReference =
> document.getElementById(idOfFirstInputThatWeShould CheckString);


Be sure to do feature tests.

> if (inputToCheckReference != false && inputToCheckReference !=
> undefined) {


There is no point in this for several reasons. First, comparing a boolean
against `false' is unnecessary; you can always use !inputToCheckReference
instead.

Second, if a boolean is returned, there is redundancy. Because in

true != false && true != undefined

(if we assume it is a true-value, see below) the second operand of `&&'
will be evaluated but also implicitly type-converted to

true != false (== !(1 == 0) == true)

and in

false != false && false != undefined

(if we assume it is a false-value, see below) the second operand will
never be evaluated because the first operand evaluates to

!(0 == 0) == false

Third, gEBI is not supposed to return a boolean at all, it is supposed
to return an object reference, `null' or /an/ undefined value (that is
not necessarily /the/ `undefined' value).

<URL:http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-getElBId>

You cannot know about the value that the W3C DOM Level 2+3 Specifications
define as "undefined", so there is no way of testing against it. However,
a DOM implementation with reasonable ECMAScript language binding would
return a false-value then (one of `undefined', `null', `false', +0, -0,
NaN, or "").

So this test should be simply

if (inputToCheckReference)

> var valueOfInputToCheckString = inputToCheckReference.value;


Since you do not test that value later, there is no need for assigning
it to a variable.

> var regXString = characterThatsNeededForThisField;
> var regX = new RegExp(regXString, "g");


Unless the `characterThatsNeededForThisField' are variant, there is no
need for the `regXString' and `regX' variables, including the RegExp
constructor.

> var results = valueOfInputToCheckString.match(regX);


var results = valueOfInputToCheckString.match(/.../g);

> var resultsTypeof = typeof(results);


Again, there is no need for this variable. And `typeof' is an operator,
not a function.

> if (resultsTypeof != Array) {


`resultsTypeof' will always be a non-empty string, as that is what the
`typeof' operator evaluates to (in your case, always "object" [Array or
`null']). But `Array' is a Function object reference.

In order not to bother you with the details: that expression evaluates to
true always. Therefore, the (currently empty) first branch should be
executed always. (It does in my tests.)

The correct test would be

if (results)

I do not understand why you are "getting the alert message every time",
because you should _never_ get it with this code (the alert() call is in
the else-branch which should never be executed). The only reason I can
think of is that you are not using the code that you have posted. Another
indication of that is that you have replaced everything with identifiers
in the posted code.

(See the bottom of this posting for an example of how to do better.)

--------------------------------------------------------------------------
However, for those who are interested in the details, the following should
happen according to ECMAScript Ed. 3 Final:

| 11.9.2 The Does-not-equals Operator ( != )
|
| The production EqualityExpression :
| EqualityExpression != RelationalExpression
| is evaluated as follows:
|
| 1. Evaluate EqualityExpression.
| 2. Call GetValue(Result(1)).
| 3. Evaluate RelationalExpression.
| 4. Call GetValue(Result(3)).
| 5. Perform the comparison Result(4) == Result(2). (Section 11.9.3.)
| 6. If Result(5) is true, return false. Otherwise, return true.

| 11.9.3 The Abstract Equality Comparison Algorithm:
|
| The comparison x == y, where x and y are values, produces true or false.

x := "object"
y := Array

| Such a comparison is performed as follows:
|
| 1. If Type(x) is different from Type(y), go to step 14.
|
| (According to 5.2: Type(x) == String, Type(y) == Object)
| [...]
| 14. If x is null and y is undefined, return true.
| 15. If x is undefined and y is null, return true.
| 16. If Type(x) is Number and Type(y) is String,
| return the result of the comparison x == ToNumber(y).
| 17. If Type(x) is String and Type(y) is Number,
| return the result of the comparison ToNumber(x) == y.
| 18. If Type(x) is Boolean, return the result of the comparison
| ToNumber(x) == y.
| 19. If Type(y) is Boolean, return the result of the comparison
| x == ToNumber(y).
| 20. If Type(x) is either String or Number and Type(y) is Object,
| return the result of the comparison x == ToPrimitive(y).

Result(20) := "..." == ToPrimitive(Array)

According to "9.1 ToPrimitive":

| Input Type Result
|
| [...]
| Object Return a default value for the Object. The default value of
| an object is retrieved by calling the internal
| [[DefaultValue]] method of the object, passing the optional
| hint PreferredType. The behaviour of the [[DefaultValue]]
| method is defined by this specification for all native
| ECMAScript objects (section 8.6.2.6).

According to 8.6.2.6 [[DefaultValue]] (hint):

| 1. Call the [[Get]] method of object O with argument "toString".

Result(1) := Array.toString() == "function Array() { ... }"

| 2. If Result(1) is not an object, go to step 5.
| [...]
| 5. Call the [[Get]] method of object O with argument "valueOf".

Result(5) := Array.valueOf() == function Array() { ... }

| 6. If Result(5) is not an object, go to step 9.
| 7. Call the [[Call]] method of Result(5), with O as the this value and
| an empty argument list.

Result(7) := (function Array() { ... })[[Call]](this := Array)

(equivalent to Array.call(Array))

According to 13.2.1 [[Call]]:

| 1. Establish a new execution context using F's FormalParameterList, the
passed arguments list, and the `this' value as described in Section
10.2.3.
| 2. Evaluate F's FunctionBody.

According to 15.4.1 The Array Constructor Called as a Function:

| When Array is called as a function rather than as a constructor, it
| creates and initialises a new Array object. Thus the function call
| Array(...) is equivalent to the object creation expression new Array(...)
| with the same arguments.

| 15.4.2.1 new Array ( [ item0 [ , item1 [ , ... ] ] ] )
|
| This description applies if and only if the Array constructor is given no
| arguments or at least two arguments.
|
| The [[Prototype]] property of the newly constructed object is set to the
| original Array prototype object, the one that is the initial value of
| Array.prototype (section 15.4.3.1).
|
| The [[Class]] property of the newly constructed object is set to "Array".
|
| The length property of the newly constructed object is set to the number
| of arguments.
|
| The 0 property of the newly constructed object is set to item0 (if
| supplied); the 1 property of the newly constructed object is set to item1
| (if supplied); and, in general, for as many arguments as there are, the k
| property of the newly constructed object is set to argument k, where the
| first argument is considered to be argument number 0.

That means

Array.call(Array) == [] (empty array)

| 3. Exit the execution context established in step 1, restoring the
| previous execution context.
| 4. If Result(2).type is throw then throw Result(2).value.
| 5. If Result(2).type is return then return Result(2).value.

This would apply then.

And back to 8.6.2.6 [[DefaultValue]] (hint):

Result(7) := []

| 8. If Result(7) is a primitive value, return Result(7).
| 9. Throw a TypeError exception.

Since [] is not a primitive value, the exception should be thrown.

| 5.2 Algorithm Conventions
|
| [...]
| If an algorithm is defined to "throw an exception", execution of the
| algorithm is terminated and no result is returned. The calling algorithms
| are also terminated, until an algorithm step is reached that explicitly
| deals with the exception, using terminology such as "If an exception
| was thrown...". Once such an algorithm step has been encountered the
| exception is no longer considered to have occurred.

If I am not mistaken, something interesting happens here: The Specification
says that no result would be returned, and that the calling algorithms are
terminated then. Which should leave us with

Result(20) := "..." == ?

in 11.9.3.

However, since we know the expression "object" != Array evaluates to `true'
in implementations, some value that is required for

| 11.9.2 The Does-not-equals Operator ( != )
|
| [...]
| 5. Perform the comparison Result(4) == Result(2). (Section 11.9.3.)
| 6. If Result(5) is true, return false. Otherwise, return true.

must have been returned.

I see two possibilities for this to happen:

A) Array.call(Array) returns `undefined' internally (although we know
it returns [] in the implementation), therefore [[DefaultValue]]'s
Result(7) would be undefined.

B) "No result" for an execution context that throws an exception would
allow for "the `undefined' value". Since no exception happens in
the implementation, it would have to discard it silently.

Then `"object" == undefined' evaluated to `false', and therefore
`!("object" == undefined)' evaluated to `true'.

Am I missing something important here?
----------------------------------------------------------------------

As for your approach:

<form ... onsubmit="return isMP3(this);">
<script type="text/javascript">
function isMP3(f)
{
var es, sel;
if (f && (es == f.elements)
&& (sel = es['formInputs[cbLinksToWhatUrl]']))
{
if (!sel.options[sel.selectedIndex].value.test(/\.mp3$/))
{
window.alert("Please select an MP3 file.");
return false;
}
}
else
{
window.alert("h4x0r error. Please install Brain 1.0.");
return false;
}

return true;
}
</script>

<fieldset>
<select name="formInputs[cbLinksToWhatUrl]" ...>
<option value="" selected>--- Select a file ---</option>
...
</select>
</fieldset>
</form>


PointedEars
--
The English government is much of a German poodle as
other governments. The Germans infiltrated them all.
-- "The only real Barbara Schwarz", dsw.scientology,
< >)
 
Reply With Quote
 
Bart Van der Donck
Guest
Posts: n/a
 
      06-01-2006
Randy Webb wrote:

> Jake Barnes said the following on 5/30/2006 5:00 PM:
> > I've a form for creating podcast episodes. The user can pick an MP3
> > from a drop down box (an HTML select box). I'm trying to add some error
> > checking. In the code below, I try to get the value of the select box,
> > and then I try to see if it contains the string ".mp3". I'm getting the
> > alert message every time. Why is that?

>
> var selectValue = document.forms['formID'].elements['selectName'.value;
>
> if (selectValue.indexOf('.mp3') != -1){
> alert('Your value has .mp3 in it')
> }
> else{
> alert('Your value does not have .mp3 in it')
> }


Your have a syntax error in your code. The better way is to check
whether the string actually *ends* on .mp3. Also, the regex should not
be case sensitive.

var aString='file.Mp3';
if (/\.mp3$/i.test(aString)) {
alert('OK');
}
else {
alert('not OK');
}

--
Bart

 
Reply With Quote
 
Randy Webb
Guest
Posts: n/a
 
      06-01-2006
Bart Van der Donck said the following on 6/1/2006 3:59 AM:
> Randy Webb wrote:
>
>> Jake Barnes said the following on 5/30/2006 5:00 PM:
>>> I've a form for creating podcast episodes. The user can pick an MP3
>>> from a drop down box (an HTML select box). I'm trying to add some error
>>> checking. In the code below, I try to get the value of the select box,
>>> and then I try to see if it contains the string ".mp3". I'm getting the
>>> alert message every time. Why is that?

>> var selectValue = document.forms['formID'].elements['selectName'.value;
>>
>> if (selectValue.indexOf('.mp3') != -1){
>> alert('Your value has .mp3 in it')
>> }
>> else{
>> alert('Your value does not have .mp3 in it')
>> }

>
> Your have a syntax error in your code.


Indeed it does.

> The better way is to check whether the string actually *ends* on .mp3.


While I agree totally, that wasn't the OP's request.

> Also, the regex should not be case sensitive.


Absolutely, unless you know for sure the server is only outputting one case.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
programmatically select an option in "select" box in html rvelosoo Javascript 1 08-13-2008 10:53 AM
How make regex that means "contains regex#1 but NOT regex#2" ?? seberino@spawar.navy.mil Python 3 07-01-2008 03:06 PM
select box - using refresh to select same item twice entfred@hotmail.com Javascript 2 07-25-2006 11:54 PM
<select tag> - how do I set the current index in a multiple select box? Ferd Berfel Javascript 4 04-06-2004 06:53 PM
select of select box will select multiple in another box palmiere Javascript 1 02-09-2004 01:11 PM



Advertisments
 



1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57