Implement a Custom Search Engine built on top of google.com - javascript

I want to build a webpage/ custom search engine that will take user input and then query google for the results, except that with a number of keywords I want to append some predefined strings that ( will be stored in a dictionary/file..).
I tried using a form and then submitting query to google, but I want to do it as beautifully (and much the same way) as these people have done.
They just append Zlatan at the beginning , I want to append variable strings.
To show you what I've tried, here is the link to GitHub: https://github.com/google/google-api-php-client/blob/master/examples/simple-query.php
Any useful links, knowledge , suggestions, steps would be heartily appreciated.

This is how they do it. Just do the same but append any word from you list of words as you like. It's not clear how you're supposed to select what words to add. Specify that and we can be more helpful.
var form = document.querySelector('form');
var input = document.getElementById('field');
form.addEventListener('submit', function(ev) {
ev.preventDefault();
var redirect = 'https://google.com/search?q=zlatan+' + input.value;
window.location = redirect;
});

Related

Formatting an document input field that shows automatically dots and hyphens but not allowing them when submitting the form

I'm currently working in user creation login page for an e-commerce and I need to achieve something like this: https://drive.google.com/file/d/1JJBeZG-oyzrh8vCDRMjfv03oGDjrWwZw/view?usp=sharing (The video has to be seen on fullscreen, otherwise it'll be too small to detail anything)
Thing is I should not allow any special characters when the form is submitted and I think I already solved that:
$('#login_form #document').on('input', function() {
this.value = this.value.toLocaleUpperCase();
let count = this.selectionStart,
regex = /[^a-z0-9]/gi,
value = $(this).val();
console.log(value)
if(regex.test(value)) {
$(this).val(value.replace(regex, ''));
count--;
}
this.setSelectionRange(count, count);
});
But I can't really think in a way to show the dots and hyphens and not allowing them on submit.
Also, any recommendation to improve the code will be well receive. Thanks in advance!
Just keep the formatting from your front-end, do some reverse reformatting in backend instead, example you input 10,000.00 then you submit it using backend PHP just replace "," str_replace(',', '', '10,000.00') then you will get 10000.00 then use $new_number = (float)10000.00
$input_number = '10,000.00';
$input_number_no_comma = str_replace(',', '', $input_number);
$input_number_new = (float)$input_number_no_comma;
echo $input_number_new ;

Regex for finding link

I have an issue related to finding a regex for the link with some conditions. Here is the scenario:
I have created utils.ts it's a typescript. basically, it will take an API response as an input and return the formatted HTML supported text, like bold text, email, Images, Links.
So let's take one scenario which I am facing.
as a return of the utils.ts file, I am getting this.
https://www.google.com Click here
(Note: normal links and 'a' tag links can occure in any order)
from the above text, as you can see this part Click here is already in HTML supported method.
So I will get the following output on GUI
https://www.google.com Click here
so from this point, I want a regex which can format https://www.google.com but it must not manipulate Click here as it is already formated.
Here I also want to format https:///www.google.com as follow
Google
The main problem I am facing is when I am replacing the string with 'https://..' with tags it will also replace the links inside 'href' like this
Google Google">Click me</a>
Which is what I don't want.
Please share your thought on this.
Thank you
Not yet formatted links can be found using alternations. The idea is - if a link is formatted it's not captured to a group (don't be confused that the regex still finds something - you should only look at Group 1). Otherwise, the link is captured to a group.
The regex below is really simple, just to explain the idea. You might want to update it with a better URL search pattern.
demo
(?:href="https?\S+")|(https?\S+)
If I understood correctly, you want to extract from the text those web addresses that appear in the text and are not links. If so check out the following javascript:
//the data:
var txt1='https://www.google.com Click here http://other.domain.com';
// strip html tags
String.prototype.stripHTML = function () {
var reTag = /<(?:.|\s)*?>/g;
return this.replace(reTag, " ");
};
var txt2=txt1.stripHTML();
//console.log(txt2);
//split tokens
var regex1 = /\s/;
var tokens = txt2.split(regex1);
//console.log(tokens);
//build an address table
regex2=/^https?:\/\/.*/;
var i=0, j=0;
var addresses=[];
for (i in tokens) {
if (regex2.test(tokens[i])) {
addresses[j] = tokens[i];
j++;
}
i++;
}
console.log(addresses);

Find specific results from a text file

Suppose you were reading a text file, with Javascript and jQuery and suppose the server-side guy was unwilling to give you say xml or JSON, and you want to parse the thing once to get relevant text that you will use later in an autocomplete, like so:
Text file (assume there are many similar listings and there are different DATABASES):
QUERY:1
DATABASE:geoquery
NL:What are the capitals of the states that border the most populated states?
SQL:something
DR:
root(ROOT-0, What-1)
cop(What-1, are-2)
det(capitals-4, the-3)
nsubj(What-1, capitals-4)
det(states-7, the-6)
prep_of(capitals-4, states-7)
nsubj(border-9, states-7)
rcmod(states-7, border-9)
det(states-13, the-10)
advmod(populated-12, most-11)
amod(states-13, populated-12)
dobj(border-9, states-13)
QUERY:2
DATABASE:geoquery
NL:What are the capitals of states bordering New York?
SQL:SELECT state.Capital FROM state JOIN border_info ON state.State_Name
DR:
root(ROOT-0, What-1)
cop(What-1, are-2)
det(capitals-4, the-3)
nsubj(What-1, capitals-4)
prep_of(capitals-4, states-6)
partmod(states-6, bordering-7)
nn(York-9, New-8)
dobj(bordering-7, York-9)
I can use a regex to peel off say all NL: for example, but I need to first pare the file down so only specific NL's associated with a DATABASE get read. So read the file once getting all matches for a specific database that the user selects from a select, then make an array of NL from that list to be the source of an autocomplete.
$(document).ready(function(){
$.get('inputQueryExamples.txt',function(data){
// need code here to read text file first and limit results
var queryString = data;
var cleanString = "";
cleanString = queryString.match(/^NL.*/gm);
console.log(cleanString);
$('#what').html(cleanString);
var nlString = cleanString.map(function(el) {return el.replace('NL:','');});
$('#query-list').autocomplete({
source:nlString
});
});//end get
});
Thanks for any insight.
Using regex for this is like using ducktape to patch up a severed limb.
Any way,
By the looks of it, you want to get all of the NL('s) when they come from a particular database.
You would need to do a multiline regex match, with a positive lookbehind for the database name, then you'd simply match anything after NL, stopping at the next newline.
Example:
(?<=DATABASE:geoquery).*?(?<=NL:)(.*?)(?=[\r\n])
Online demo:
Regex101 Example

Checking For HTML Using Javascript

I have a textbox on my website where I want to prevent any form of html input. I obviously already block it on the server side, but I also want to block it using javascript for multiple reasons. I did a quick Google search to see if there was some ready made function available but I couldn't find any.
Does anyone know how to do this?
Edit: Sorry if the question was not clear. I basically want to show an error when the user types html into the textbox and then tries to submit the form. The server is already programmed to reject HTML input from the textbox but I also want to prevent it on the client-side.
HTML
<textarea id='noHTML'></textarea>
JS
var ta = document.getElementById('noHTML');
ta.onkeyup = function (e) {
var val = this.value;
// alternate regexp /<\/*(p|div|span)\s*.*>/g
// fill the above regex with all html tags
if(val.match(/<\/*[^<>]\s*.*>/g)) {
// alert('no html');
// don't want an alert ? you can replace all html expressions
// alternate syntax for all entities
// this.value = val.replace(/&/g, "&").replace(/>/g, ">").replace(/</g, "<").replace(/"/g, """);
// its long and slow but the choice is yours
this.value = val.replace(/</g, '<').replace(/>/g, '>');
}
}
You can test and play with it at jsfiddle;
it's a light solution to your problem. my suggestion to you is to replace the entities during the form submission or if you don't want it at all you can alert the user on input.

Rails 3 forms question: How to create a "select" with "Add New ..." option?

I would like to create a select box with currently existing brands (e.g. Sony, Panasonic, and so on). In addition, I would like to have Add New Brand option, such that when user clicks this option, a new text field appears.
Is there any helper methods in Rails 3 that do such thing, or I need to implement this myself using Javascript ?
To my knowledge there is no such helper method.
Here's how I would do it in JS:
document.getElementById('someSelectBox').onchange = function() {
if(this.selectedIndex != this.options.length -1) return;
var new_name = prompt('Please enter a name');
if(!new_name.length) return;
var textbox = document.createElement('input');
textbox.value = new_name;
this.parentNode.appendChild(textbox); //parentNode is presumably the form
}
Working example: http://jsfiddle.net/tCBqA/
Checkout the following videos # RailsCasts.com. Ryan Bates explains how to create a nested form and then use jQuery or Prototype to add and remove fields dynamically. It isn't a perfect match for you question but should get you headed in the right direction. If you get some code that works well consider posting it back on this question for everyone to see.
http://railscasts.com/episodes/196-nested-model-form-part-1
http://railscasts.com/episodes/197-nested-model-form-part-2

Categories

Resources