如何修改用戶提交的帶有Chrome擴展程序的搜索輸入中的查詢？

Question

因此，我正在編寫用於學校作業的Chrome擴展程序，但在這一部分，我認為我需要解析字符串。 這是我第一次使用HTML，CSS和JS，因此我只是在網上搜尋有關如何實現此目標的技巧。

基本上，在我們的任務中，我們需要為Chrome創建一個擴展程序，該擴展程序實際上會打開一個新頁面，其中有一個搜索欄。 有一個網站https://www.manualslib.com/ ，我們在搜索欄中輸入的術語需要用於直接搜索該網站。

問題在於該網站的搜索URL與我慣用的URL有所不同：當您搜索某項內容時，該網站會以我搜索詞的首字母開頭，將其放在斜杠之間，然后在末尾添加整個搜索。 例如，如果您在此處搜索genetics ，則URL看起來像https://www.manualslib.com/g/genetics.html 。

因此，我想我需要以某種方式解析字符串以獲取搜索字詞的第一個字符，對嗎？ 根據w3schools的說法，使用split()方法將是一個好主意。 問題是我不太確定語法在這里如何工作。 正如我所說的，這是我第一次從事Web開發，所以我對人們在這里做事的方式完全不熟悉。 任何幫助表示贊賞。

這是我用於搜索欄的代碼（此代碼僅重定向到網頁，不搜索任何內容）：

 <div id="tfheader"> <form id="tfnewsearch" method="get" action="https://www.manualslib.com/"> <input type="text" class="tftextinput" name="str" ; size="21" maxlength="120"> <input type="submit" value="search" class="tfbutton"> </form> </div> 

我必須進行哪些更改？ 我需要在編寫用於解析字符串的函數的地方創建一個.js文件嗎？ 還是解析功能寫在HTML文件中？ 任何幫助表示贊賞，在此先感謝！

Answer 1

 var query = 'genetics'; var url = 'https://www.manualslib.com/{0}/{1}.html' .replace('{0}', query.substring(0, 1)) .replace('{1}', query); console.log(url); 

Answer 2

onsubmit事件可能會對您有所幫助。

要重定向到另一個站點，只需設置window.location ，如下所示：

search_form.onsubmit = function() // will be called as soon as the form is submitted
{
    var searchText = typehead.value; // the text entered in the search bar
    var redirectTo = "https://www.manualslib.com/"+searchText[0]+"/"+searchText+".html";
    window.location = redirectTo;
}