How to look for a word in textbox in JavaScript

Question

I am making a website simular to the app Google Now and I was wondering how to make JavaScript look for a certain word in a textbox. So for example if someone was to type "Show me the weather" into the textbox the JavaScript world see the keyword weather and it would show the me the weather. Here is my code:

JavaScript:

function showAlert() {

    var txtCtrl = document.getElementById("textbox1");

    var txtVal = txtCtrl.value;

    if (txtVal == '') {
        alert('Please fill in the text box. For a list of commands type "Help" into the text box.');
    }else if (txtVal == 'Start' {
        alert('Hello. What would you like me to do?');
    }else if (txtVal === 'Weather') {
        window.location = "https://www.google.com/#q=weather";
    }else if (txtVal === 'Time') {
        alert('The current time according to your computer is' + formatTime(new Date()));
    }else if (txtVal === 'Help') {
        window.location = "help/index.html";
    }else if (txtVal === 'Donate') {
        window.location = "donate/index.html";
    }else if (txtVal === 'WWW.' ||) {

    }else{
        alert('Sorry, I do not reconise that command. For a list of commands, type "Help" into the text box.');
    }
}
//Show time in 24hour format
function showTime(){
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes(); 
  return [ h, m ].join(':')
}
//Show time in 12hour format
var formatTime = (function () {
    function addZero(num) {
        return (num >= 0 && num < 10) ? "0" + num : num + "";
    }

    return function (dt) {
        var formatted = '';

        if (dt) {
            var hours24 = dt.getHours();
            var hours = ((hours24 + 11) % 12) + 1;
            formatted = [formatted, [addZero(hours), addZero(dt.getMinutes())].join(":"), hours24 > 11 ? "PM" : "AM"].join(" ");            
        }
        return formatted;
    }
})();

And the HTML:

<!doctype html>
<html>
<head>
<title>Random Project</title>
</head>
<body>
<div class="container">
    <img class="logo" src="logo.png" width="450" height="110" alt="Random Project">
    <input type="text" name="textbox1" value="" spellcheck="false" dir="ltr" placeholder="Type here" id="textbox1"><br>
    <button id="button1" name="button1" aria-label="Help me" onClick="showAlert();">
        <span id="button1_text">Help me</span>
    </button>
    <div class="separator"></div>
    <span class="information">&copy; Copyright DemDevs 2013. All rights reserved. Made by Omar Latreche<br><a href="donate/index.html">Donate now</a></span>
    <div class="tip">
        <span class="tip">Tip: </span><span class="tip_text">The commands are NOT case sensitive</span>
    </div>
</div>
<div class=""></div>
</body>
</html>

Any help will be greatly appreciated.

Thanks, Omar!

Use `match` https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions or `indexOf`. Also look at the switch function to avoid that if/else jungle — Popnoodles, Dec 23 '13 at 11:23
http://stackoverflow.com/questions/1789945/how-can-i-check-if-one-string-contains-another-substring-in-javascript i think this may help you. Cheers — Ratz, Dec 23 '13 at 11:25

aksu · Accepted Answer · 2013-12-23T11:50:29.607

You can check if string contains substring. Use indexOf function, it returns position of given string in its parent string. Try this:

if (txtVal == '') {
    alert('Please fill in the text box. For a list of commands type "Help" into the text box.');
} else if (txtVal.indexOf("start") != -1) {
    alert('Hello. What would you like me to do?');
} else if (txtVal.indexOf("weather") != -1) {
    window.location = "https://www.google.com/#q=weather";
}
// and so on.

Function returns -1, if the value start is not found.

And. If you have lots and lots of those functions, you should put all the function words to array, and then avoid that too large if/else system. Then you should check that array, if corresponding function exists. I made function to help your project:

function returnWord(value, array) {
    if (!(value in array)) {
        return array[value]();
    }
    else {
        alert('returnWord() error: No needle found in haystack');
    }
}

Call it like this:

var words = {
             start: function() { alert('Hello. What would you like me to do?'); },
             weather: function() { window.location = "https://www.google.com/#q=weather"; },
             time: function() { alert('The current time according to your computer is' + formatTime(new Date())); },
             /* all the functions here */
            };

returnWord(txtVal, words);

score 1 · Answer 2 · answered Dec 23 '13 at 11:29

1

Simple you can go like this

var str = document.getElementById("textbox1");
var n = str.indexOf("welcome");

if(n != -1){
 //Do what you want
}else{
 //Get Out
}

answered Dec 23 '13 at 11:29

Jenno Richi Benat

671
5
23

score 1 · Answer 3 · answered Dec 23 '13 at 11:36

1

Use can also use search() method:

...
if (txtVal.search("start") != -1) {
   alert('Hello. What would you like me to do?');
}
...

Check here: http://www.w3schools.com/jsref/jsref_search.asp

answered Dec 23 '13 at 11:36

Dhanu Gurung

8,480
10
47
60

How to look for a word in textbox in JavaScript

3 Answers3

Linked

Related