CODEWITHSUNDEEP
htmlgoogle-chromefirefoxgoogle-search
Vishal DS
Vishal DS

Reputation: 175

Google search from webpage

I'm building a simple webpage. I wanna select the text inside a <div> and then open a new tab in the same browser and do a Google search for that text with the click of a button. Right now, I just have the solution to copy to clipboard with a button click. Is there any workaround for this...?

I'm OK with using either Google Chrome or Firefox as it's just for a local project. Not meant for public hosting.

UPDATE : I actually need to copy text which is rendered by other HTML code inside the div. I don't wanna copy the code inside the div also.

For reference, here is a code snippet that I used to make my copy to clipboard function.

JavaScript: 

function CopyToClipboard(containerid) {
        if (document.selection) {
            var range = document.body.createTextRange();
            range.moveToElementText(document.getElementById(containerid));
            range.select().createTextRange();
            document.execCommand("copy");

        } else if (window.getSelection) {
            var range = document.createRange();
            range.selectNode(document.getElementById(containerid));
            window.getSelection().addRange(range);
            document.execCommand("copy");
            alert("Copied the text. Use Ctrl+V to paste on Google")
        }
    }

HTML:

<div class="search" id="div1">
      <!--Text to search for (here, CEO of Google)-->
      <span>CEO of Google</span>
</div>
<button id="button1" class="button" onclick="CopyToClipboard('div1')">Copy question</button>

This code selects just the text inside the div and then copies it. I don't wanna search for the rest of the code....

Upvotes: 0

Views: 199

Answers (3)

Vishal DS
Vishal DS

Reputation: 175

OK I've got a workaround. Hope it helps someone else with the same problem. A special thanks to both @Daan Seuntjens and @Alex Dragnea for sharing answers as I have used their basic method.

Here, I've selected the text in the <div> and stored it int the range variable which was used earlier for the copy to clipboard function. And then, I did I used another variable query just like both the answers earlier told to add the text https://www.google.com/search?q= to the beginning of the text. And then, I did window.open(query); to open it in another tab and then do a Google search..

NOTE : This code doesn't run here on Stack Overflow. But, I have tested it externally. It is verified and ready to go...

function search(containerid) {
        if (window.getSelection) {
            var range = document.createRange();
            range.selectNode(document.getElementById(containerid));
            window.getSelection().addRange(range);
            var query = "https://www.google.com/search?q=" + range;
            window.open(query);
        }
 } 
<div class="question" id="div1">
      <!--Text to search for (here, CEO of Google)....-->
      <span>CEO of Google</span>
</div>
<button class="button" onclick="search('div1')">Search</button>

Upvotes: 0

Alex Dragnea
Alex Dragnea

Reputation: 174

Try with the code below.

You can find out more information about how to redirect from your page here.

<html>
<body>

<div id="search_this">New text</div>
<button type="button" onclick="myButtonOnClick()">Search!</button>

</body>
<script>
  function myButtonOnClick(){
    let url = "https://www.google.com/search?q=";
    let searchText = document.getElementById("search_this").innerHTML;
    debugger;
    window.open(url + searchText);
  }
</script>
</html>

Upvotes: 1

Daan Seuntjens
Daan Seuntjens

Reputation: 960

This code does the job:

function searchMe() {
  var stringQuery = document.getElementById('text_div').innerHTML;
  var query = "https://www.google.com/search?q=" + stringQuery.split(' ').join('+');
  window.open(query);
}
<div id="text_div" onClick="searchMe();">
Kittens
</div>

Note: Does not work here on stackoverflow but I've tested it in a custom html file and it works.

Upvotes: 0

Related Questions