从用户输入的文本字符串中跳过特殊字符，并在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" />

USER INPUT :: " Is this Ram's pen ? " (Without double quote)

When user click the button, the input should be..

EXPECTED :: " Is-this-Rams-pen " (Without double quote)

Main aim is to adding Hyphen(-) in between every word and skipping the other special characters.

Is it possible in Javascript ?

Answer 1

Use this piece of code.

$('#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, '') filters the string to just alphanumeric characters. replace(/[_\\s]/g, '-') replaces all underscores and spaces with hyphens.

Source of Regex: RegEx for Javascript to allow only alphanumeric

JSFIDDLE

Answer 2

您可以使用2条替换语句

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

Answer 3

Another way is to select all the text (along with space) which does not have special characters and then replacing spaces with -

 $('#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" />