HTML and JavaScript make search input ready for URL

Question

I am making a webpage so I can search google from a custom page. But when I click search it does search my input on google but the URL should be different when I input # and % and all these characters. So my question is how do I convert something like this :

http://www.google.com/#q=Hello World C#

to this :

http://www.google.com/#q=HEllo+world+C%23

using JavaScript

EDIT : This is the function I tried to use

    $('button#SubmitSearch').click
    (
        function()
        {
            window.location = encodeURIComponent("https://www.google.nl/#q=" + $('input#SearchBar').val());
        }
    );

and

    $('button#SubmitSearch').click
    (
        function()
        {
            window.location = "https://www.google.nl/#q=" + $('input#SearchBar').val();
        }
    );

You'll need to encode the search text. There's a handy Javascript function that does this, take a look at `encodeURIComponent` — Nick R, Oct 30 '13 at 13:12

OneOfOne · Answer 1 · 2013-10-30T14:17:42.260

1

Using encodeURI, eg :

console.log(encodeURI('http://www.google.com/#q=Hello World C#'));
> "http://www.google.com/#q=Hello%20World%20C#"

Or encodeURIComponent

console.log(encodeURIComponent('Hello World C#'));
> "Hello%20World%20C%23"

From your OP :

$('button#SubmitSearch').click(function(){
    window.location = "https://www.google.nl/#q=" + encodeURIComponent($('input#SearchBar').val());
});

edited Oct 30 '13 at 14:17

answered Oct 30 '13 at 13:11

OneOfOne

95,033
20
184
185

I wouldn't even have mentioned your *or* solution as it's kind of inferior in this context given that you would need to append the base URL. – CodingIntrigue Oct 30 '13 at 13:13

score 0 · Answer 2 · answered Oct 30 '13 at 13:13

0

use the function encodeURIComponent:

encodeURIComponent('this is a string with special characters like # and ?')

hope it helps :)

answered Oct 30 '13 at 13:13

David V

185
8

score 0 · Answer 3 · answered Oct 30 '13 at 13:19

0

try this Var search = document.getElementById("searchbox"); Then use addeventlistener or onClick

key=key.replace(/ /g,"+"); document.location("http://google.com/#q" + search.value);

answered Oct 30 '13 at 13:19

user2936438

1
2

HTML and JavaScript make search input ready for URL

3 Answers3