撇號后的Javascript變量被截斷

Question

我有一個Javascript，可從兩個HTML下拉列表中讀取文本，刪除所有特殊字符，然后將文本存儲在變量中。 下拉列表中的文本來自JSON文件。 問題在於，只要下拉列表中的文本具有撇號，Javascript都會在撇號處剪切字符串，因此，撇號之后的所有文本都不會包含在Javascript變量中。

我已經包含了一條替換規則，嘗試用非空格但沒有運氣的方式替換所有撇號。 我無法通過使用十六進制代碼來避免此問題，因為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');
    });

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

最后，下拉列表在HTML中的編寫如下：

<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>

提前致謝。

Answer 1

好的，問題出在選項的動態構造中。 您已經通過以下方式組織了撇號：

 $jsontwo.append("<option value='"+value+"'>" + value + "</option>");

結果，單引號將該字符串的“值”部分中的城市名稱括起來，因此該字符串在其遇到的第一個單撇號處被截斷。 構造時基本上如下所示：

<option value='Braine-l'Alleud'>Braine-l'Alleud</option>

您需要在字符串的該部分使用雙引號：

 $jsontwo.append('<option value="'+value+'">' + value + "</option>");

這樣可以解決問題，並為您提供以下服務：

 <option value="Braine-l'Alleud">Braine-l'Alleud</option>

Answer 2

我不確定為什么要按原樣生成鏈接，但是如果將代碼從jQuery替換為javascript，它應該能夠讀取文本。

如下所示：

var var1 = document.getElementById("json-one").innerText;
var var2 = document.getElementById("json-two").innerText;

我將html放在div中，如下所示：

<div id="json-one">Hirschegg,Salzburg,Bergheim,Wien</div>
<div id="json-two">Antwerpen,Braine-l'Alleud,Brugge</div>

要么

將.val（）替換為.html（），如下所示：

var var1 = $('#json-one').html();
var var2 = $('#json-two').html();

看看是否有幫助！