從用戶輸入的文本字符串中跳過特殊字符，並在Javascript中的每個單詞之后添加連字符

Question

HTML：

    <input type="text" placeholder="Enter page title name" id="text" style="width: 500px;" />
<br />
<br />
<input type="button" value="Click Me" id="button" />

用戶輸入:: ::“這是Ram的筆嗎？”（不帶雙引號）

當用戶單擊按鈕時，輸入應為

預期的::“ Is-this-Rams-pen”（不帶雙引號）

主要目的是在每個單詞之間添加連字符（-），並跳過其他特殊字符。

Javascript是否可能？

Answer 1

使用這段代碼。

$('#button').on('click', function() {

    var str = $('#text').val();

  $('#text').val((str.replace(/[^a-z0-9\s]/gi, '').trim().replace(/[_\s]/g, '-')));
})

replace(/[^a-z0-9\\s]/gi, '')將字符串過濾為僅字母數字字符。 replace(/[_\\s]/g, '-')用連字符替換所有下划線和空格。

正則表達式的來源： Java的RegEx僅允許字母數字

JSFIDDLE

Answer 2

您可以使用2條替換語句

str.replace(/\s+/g, "-").replace(/[^a-zA-Z\d]+/g, "")

Answer 3

另一種方法是選擇所有不包含特殊字符的文本（以及空格），然后將空格替換為-

 $('#button').on('click', function() { var str = $('#text').val(); $('#text').val((str.match(/[a-zA-Z0-9\\s]+/gi).join('').trim().replace(/\\s+/g, '-'))); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" placeholder="Enter page title name" id="text" style="width: 500px;" /> <br /> <br /> <input type="button" value="Click Me" id="button" />