撇號後可變JavaScript切斷

Question

我有一個Javascript從兩個HTML下拉列表中讀取文本，刪除所有特殊字符，然後將文本存儲在變量中。下拉列表中的文本來自JSON文件。問題是，無論何時下拉列表中的文本都有撇號，JavaScript都會在撇號處剪切字符串，因此撇號後的所有文本都不包含在Javascript變量中。

我已經包含了一個替換規則來嘗試用一個非空格替換所有的撇號，但沒有運氣。我不能通過使用HEX代碼來避免這個問題，因爲Javascript直接從HTML下拉列表中讀取文本。

示例：如果用戶在下拉列表中選擇「比利時」和「Braine-l'Allerud」，則javascript應創建變量「Cities-belgium-brainelallerud.html」。相反，它將「Braine-l'Allerud」中的撇號之後的所有文本剪切掉，而是創建一個變量「Cities-belgium-brainel.html」

這裏是JSON文件（下拉列表中文本的基礎）：

"austria": "Hirschegg,Salzburg,Bergheim,Wien", 
"belgium": "Antwerpen,Braine-l'Alleud,Brugge" 

這裏是Javascript代碼：

jQuery("button[type='submit']").click(function(e) { 
    e.preventDefault() 
    var var1 = $('#json-one').val() 
    var var2 = $('#json-two').val().toLowerCase().replace(/'/g,"").replace(/[^a-zA-Z0-9_-]/g,'') 

    var link = "Cities-"+var1+"-"+var2+".html" 
    console.log(link) 
    document.location = link; 
    }); 

值提取到下拉列表中通過以下腳本的JSON：

$(document).ready(function(){ 
    $("#json-one").change(function() { 
     var $dropdown = $(this); 
      $.getJSON("../jsondata/data003.json", function(data) { 

       var key = $dropdown.val(); 
       var vals = []; 

       switch(key) { 
        case 'austria': 
         vals = data.austria.split(","); 
         break; 
        case 'belgium': 
         vals = data.belgium.split(","); 
         break; 
      } 
       var $jsontwo = $("#json-two"); 
       $jsontwo.empty(); 
       $.each(vals, function(index, value) { 
        $jsontwo.append("<option value='"+value+"'>" + value + "</option>"); 
       }); 

      }); 
     }); 
     $("#json-one").trigger('change'); 
    }); 

下拉列表是動態的;第二個下拉列表（城市）取決於用戶在第一個下拉列表（國家）中選擇的內容。提前

<span class="fontyellow">Country:</span> 
    <select id="json-one"> 
       <option value="austria">Austria</option> 
       <option value="belgium">Belgium</option> 
    </select> 

<span class="fontyellow">City:</span> 
    <select id="json-two"> 
    </select> 

感謝：

最後，在HTML如下下拉列表被寫入。