2017-03-16 59 views
1

我寫一個JavaScript來在結束對非英文字符添加{Y}開始和{/ y)的存在。我也需要它保留空行。但在目前的情況下,它將{y} {/ y)添加到空行/新行。檢查新行是否使用正則表達式

var lyrics = document.getElementById('userInput'); 
 

 
function printSong() { 
 
    var input = lyrics.value; 
 
    var lines = input.split('\n'); 
 
    var generatedText = ""; 
 
    for (var i = 0; i < lines.length; i++) { 
 
    if (lines[i].match(/[A-z]|[0-9]{2}/) != null | lines[i].match(/\s/) != null) { 
 
     generatedText = generatedText + lines[i] + '\n'; 
 
    } else { 
 
     generatedText = generatedText + "{y}" + lines[i] + "{/y}" + '\n'; 
 
    } 
 
    } 
 
    document.getElementById('output').value = generatedText; 
 
}
<div class="container-fluid"> 
 
    <div class="col-xs-12"> 
 
    <div class="col-xs-5"> 
 
     <textarea id="userInput" class="form-control" cols="40" rows="10" placeholder="Enter song lyrics here">testing 
 

 
அஇஉ்உ்உ</textarea> 
 
    </div> 
 
    <div class="col-xs-2" style="text-align: center"> 
 
     <button type="button" class="btn btn-success" onclick="printSong()">Generate tags</button> 
 
    </div> 
 
    <div class="col-xs-5"> 
 
     <textarea disabled id="output" class="form-control" cols="40" rows="10" placeholder="Generated Song"></textarea> 
 
    </div> 
 
    </div> 
 
</div>

+0

請注意在編輯'<>'圖標。您可以放置​​ HTML/CSS/JS *代碼並將它們設置爲可執行代碼段。 – Rajesh

+2

需要注意的兩件事:你在一個'if'裏面使用了一元'''',並且'[A-z]'不僅僅匹配ASCII字母。 –

+0

你想找到非英文字符或非英文字符的行嗎? – ReadyFreddy

回答

0

避免將您的標記,以空行是簡單地添加

!lines[i].trim() || 

...你if年初的事。這取得了這一行,剝去了任何前導和尾隨的空白,並查看結果是否爲空。 (""falsy值,所以!""true)。如果它是空白的,它跳過正則表達式檢查(因爲||短路,如果左邊的操作數是truthy),我們進入if塊(所以我們不要將標記添加到空行)。

但作爲Wiktor pointed out

  • 對於邏輯或運算,它的||,不|
  • [A-z]匹配大寫字母A和小寫字母Z之間的所有字符。 Z之後和之前有很多字符也會匹配。

另外:​​表示「單個字符A到Z或兩個數字」。如果這就是你的真正意思,那很好,但是如果你的意思是「兩個字符是A到Z或0到9」,你可以將它們組合成一個單獨的字符類。我還沒有做到了這一點,在理論上你可能想要的條件是這樣的。

最後:如果你想要做的是檢查是否字符串表達式匹配,你不想match;相反,在表達式上使用test。例如。

if (string.match(expression) != null) 

成爲

if (expression.test()) 

,一旦讓正則表達式引擎停止,因爲它知道結果,而不是刻意去打造的結果數組。

這些變化:

var lyrics = document.getElementById('userInput'); 
 

 
function printSong() { 
 
    var input = lyrics.value; 
 
    var lines = input.split('\n'); 
 
    var generatedText = ""; 
 
    for (var i = 0; i < lines.length; i++) { 
 
    if (!lines[i].trim() || /[a-zA-Z]|[0-9]{2}/.test(lines[i]) || lines[i].match(/\s/) != null) { 
 
     generatedText = generatedText + lines[i] + '\n'; 
 
    } else { 
 
     generatedText = generatedText + "{y}" + lines[i] + "{/y}" + '\n'; 
 
    } 
 
    } 
 
    document.getElementById('output').value = generatedText; 
 
}
<div class="container-fluid"> 
 
    <div class="col-xs-12"> 
 
    <div class="col-xs-5"> 
 
     <textarea id="userInput" class="form-control" cols="40" rows="10" placeholder="Enter song lyrics here">testing 
 

 
அஇஉ்உ்உ</textarea> 
 
    </div> 
 
    <div class="col-xs-2" style="text-align: center"> 
 
     <button type="button" class="btn btn-success" onclick="printSong()">Generate tags</button> 
 
    </div> 
 
    <div class="col-xs-5"> 
 
     <textarea disabled id="output" class="form-control" cols="40" rows="10" placeholder="Generated Song"></textarea> 
 
    </div> 
 
    </div> 
 
</div>

+0

這正是我想讓它工作的原因。在'!lines [i] .trim()||中lines [i] .match(/ [a-zA-Z] | [0-9] {2} /)!= null || lines [i] .match(/ \ s /)!= null)','!lines [i] .trim()'做了什麼? –

+0

@MichelleAshwini:我應該解釋一下。它檢查'lines [i]'是否是空白的(除了空格),如果是的話,我們進入'if'塊。 '線[我]'當然是線。 '.trim()'從開始和結束剝離任何空格。 '!'強制產生的字符串爲布爾值,否定它。由於''''強制爲'false','!「」''爲'true'。所以空行不會得到標記。 –

+0

感謝您的解釋。另外,我不知道我可以用測試來代替。我結束了使用測試。使用'!lines [i] .trim()|| lines [i] .match(/ [a-zA-Z] | [0-9] {2} /)!= null ||行[i] .match(/ \ s /)!= null)',沒有爲我有'1的情況創建標籤。 இஉஊஉ',但當它是'1.இஉஊஉ'時添加標籤。相反,我用這個'lines [i] .match(/ [A-z] | [0-9] {2} /)!= null || ! /\S/.test(行[I])'。這爲'1添加了標籤。 இஉஊஉ'和'1.இஉஊஉ'。 –

相關問題