Cara menggabungkan dua kata di javascript

Hallo semuanya! di sini saya baru saja menonton playlist sekolahkoding membuat bot terminal, dan langsung saya praktekan.
Jadi di sini saya menambahkan fitur google search.
Kode :
<!DOCTYPE html>
<html>
<head>
<title>Online Bot Terminal</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">
</head>
<style>
		body {
			background:black;
			color:white;
			font-family: 'JetBrains Mono',sans serif;
		}
		::selection {
			background:white;
			color:black;
		}
		#terminal {
			font-size:12px;
		}
		.user_input {
			width:60%;
		}
</style>
<body>
<h6 align="center">===============================================</h6>
<p align="center">Welcome To Online Bot</p>
<hr>
<p>
	Command :
</p>
<div class="command">
	<p>
		-help <font color="red">&nbsp;[ Semua Command ]</font>
	</p>
	<p>
		-about <font color="red">[ About Creator ]</font>
	</p>
	<hr></div>
<br>
<div id="terminal">
	<span>root@cli~# </span><input type="text" class="user_input" placeholder="_" style="background:transparent;border:none;outline:none; color:white;" autofocus="autofocus"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
		$("#terminal").on('keyup', '.user_input', function(e){
			if(e.keyCode == 13){
				$(this).attr("disabled","disabled");
				var values = $(this).val().trim().split(" ");
				if(values == ''){
					appendResponse("Command Not!");
				} else {
					if(values[0] == 'open'){
						openLink(values[1]);
				} else {
					if(values[0] == 'Sapa'){
						name(values[1]);
				} else {
					if(values[0] == 'GS'){
						 console.log(gsearch(values[1]+values[2]+values[3]));
				} else {
						 appendResponse("Bash Command Not Found!");
				}
			}
		}
	}
	appendInput();
}
});
		// Menampilkan Response
		function appendResponse( message ){
			$("#terminal").append("<div class='bot_output'>" + message + "</div>");
		}
		function appendInput(){
			$("#terminal").append("<span>root@cli~# </span><input type='text' class='user_input' placeholder='_' style='background:transparent;border:none;outline:none; color:white;' autofocus='autofocus'>");
		}
		function openLink(link){
			window.open(link,'_blank');
		}
		function name(nama){
			$("#terminal").append("<div class='bot_output'>Hallo " + nama + "!</div>");
		}
		function gsearch(key){
			var url = ('https://www.google.com/search?q='+ key );
			window.open(url,'_blank');
		}
	</script>
</body>
</html>

Yang jadi masalah adalah ketika saya ingin mencoba fitur google search dengan command GS [ Yang ingin Di Search] 
Nah, ketika saya coba GS Apa Itu Programming?
dan berhasil membuka di tab baru, tapi yang hanya di ambil di bagian Apa saja yang masuk ke google search dan "Itu programming" tidak masuk ke google search,
jadi saya coba tambahkan seperti ini :
values[1]+values[2]+values[3]
Ternyata berhasil mengambil tiga kata, tapi kalau yang di search hanya satu kata sisanya hanyalah undefined, contoh : GS Programming
dan yang di buka google search "Programmingundefinedundefined"
seperti itu,
jadi gimana cara menggabungkan spasi di replace menjadi tanda " + " ?
avatar X451

@X451

38 Kontribusi 27 Poin


Jawaban Terpilih

Mungkin bisa dicoba seperti ini :
<!DOCTYPE html>
<html>
<head>
<title>Online Bot Terminal</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">
</head>
<style>
		body {
			background:black;
			color:white;
			font-family: 'JetBrains Mono',sans serif;
		}
		::selection {
			background:white;
			color:black;
		}
		#terminal {
			font-size:12px;
		}
		.user_input {
			width:60%;
		}
</style>
<body>
<h6 align="center">===============================================</h6>
<p align="center">Welcome To Online Bot</p>
<hr>
<p>
	Command :
</p>
<div class="command">
	<p>
		-help <font color="red">&nbsp;[ Semua Command ]</font>
	</p>
	<p>
		-about <font color="red">[ About Creator ]</font>
	</p>
	<hr></div>
<br>
<div id="terminal">
	<span>root@cli~# </span><input type="text" class="user_input" placeholder="_" style="background:transparent;border:none;outline:none; color:white;" autofocus="autofocus"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
		$("#terminal").on('keyup', '.user_input', function(e){
			if(e.keyCode == 13){
				$(this).attr("disabled","disabled");
				var values = $(this).val().trim().split(" ");
				if(values == ''){
					appendResponse("Command Not!");
				} else {
					if(values[0] == 'open'){
						openLink(values[1]);
				} else {
					if(values[0] == 'Sapa'){
						name(values[1]);
				} else {
					if(values[0] == 'GS'){
                                          let userInput = $(".user_input").val().split(" "); //Konversi nilai user input ke bentuk array
                                          userInput.shift();  //Remove (Hapus) array dengna index pertama, yaitu "GS"
                                          keywordSearch = userInput.join(" "); //Join array sisanya (teks setelah kata GS) dengan spasi
                                          console.log(gsearch(keywordSearch));
				} else {
						 appendResponse("Bash Command Not Found!");
				}
			}
		}
	}
	appendInput();
}
});
		// Menampilkan Response
		function appendResponse( message ){
			$("#terminal").append("<div class='bot_output'>" + message + "</div>");
		}
		function appendInput(){
			$("#terminal").append("<span>root@cli~# </span><input type='text' class='user_input' placeholder='_' style='background:transparent;border:none;outline:none; color:white;' autofocus='autofocus'>");
		}
		function openLink(link){
			window.open(link,'_blank');
		}
		function name(nama){
			$("#terminal").append("<div class='bot_output'>Hallo " + nama + "!</div>");
		}
		function gsearch(key){
			var url = ('https://www.google.com/search?q='+ key );
			window.open(url,'_blank');
		}
	</script>
</body>
</html>

Hasilnya bisa di cek disini : https://jsbin.com/vabacohole/edit?html,console,output

Semoga membantu! 
avatar ahanafi

@ahanafi

614 Kontribusi 357 Poin

Jawaban

Mungkin bisa dicoba seperti ini :
<!DOCTYPE html>
<html>
<head>
<title>Online Bot Terminal</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">
</head>
<style>
		body {
			background:black;
			color:white;
			font-family: 'JetBrains Mono',sans serif;
		}
		::selection {
			background:white;
			color:black;
		}
		#terminal {
			font-size:12px;
		}
		.user_input {
			width:60%;
		}
</style>
<body>
<h6 align="center">===============================================</h6>
<p align="center">Welcome To Online Bot</p>
<hr>
<p>
	Command :
</p>
<div class="command">
	<p>
		-help <font color="red">&nbsp;[ Semua Command ]</font>
	</p>
	<p>
		-about <font color="red">[ About Creator ]</font>
	</p>
	<hr></div>
<br>
<div id="terminal">
	<span>root@cli~# </span><input type="text" class="user_input" placeholder="_" style="background:transparent;border:none;outline:none; color:white;" autofocus="autofocus"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
		$("#terminal").on('keyup', '.user_input', function(e){
			if(e.keyCode == 13){
				$(this).attr("disabled","disabled");
				var values = $(this).val().trim().split(" ");
				if(values == ''){
					appendResponse("Command Not!");
				} else {
					if(values[0] == 'open'){
						openLink(values[1]);
				} else {
					if(values[0] == 'Sapa'){
						name(values[1]);
				} else {
					if(values[0] == 'GS'){
                                          let userInput = $(".user_input").val().split(" "); //Konversi nilai user input ke bentuk array
                                          userInput.shift();  //Remove (Hapus) array dengna index pertama, yaitu "GS"
                                          keywordSearch = userInput.join(" "); //Join array sisanya (teks setelah kata GS) dengan spasi
                                          console.log(gsearch(keywordSearch));
				} else {
						 appendResponse("Bash Command Not Found!");
				}
			}
		}
	}
	appendInput();
}
});
		// Menampilkan Response
		function appendResponse( message ){
			$("#terminal").append("<div class='bot_output'>" + message + "</div>");
		}
		function appendInput(){
			$("#terminal").append("<span>root@cli~# </span><input type='text' class='user_input' placeholder='_' style='background:transparent;border:none;outline:none; color:white;' autofocus='autofocus'>");
		}
		function openLink(link){
			window.open(link,'_blank');
		}
		function name(nama){
			$("#terminal").append("<div class='bot_output'>Hallo " + nama + "!</div>");
		}
		function gsearch(key){
			var url = ('https://www.google.com/search?q='+ key );
			window.open(url,'_blank');
		}
	</script>
</body>
</html>

Hasilnya bisa di cek disini : https://jsbin.com/vabacohole/edit?html,console,output

Semoga membantu! 
avatar ahanafi

@ahanafi

614 Kontribusi 357 Poin

  • Makasih mas, berhasil.. - @X451


Login untuk gabung berdiskusi