时间戳

首页 > 解决方案 > 如何在 Jquery 中替换数组中的多个特殊字符？

jquery - 如何在 Jquery 中替换数组中的多个特殊字符？

问题描述

这是我正在使用的我的表单输入。

                     <div class="row">
                        <div class="col-12">
                          <div class="form-group" id="title_of_class_form">
                            <label class="control-label">Title of Class: </label>
                            <div class="col-md-12">
                              <input type="text" name="title_of_class" id="title_of_class" 
class="form-control"
                                autocomplete="off" />
                            </div>
                            <span style="color:red;font-size:12px;" id="errNm1"></span>
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-12">
                          <div class="form-group" id="classes_link">
                            <label class="control-label">Slug (Permalink): </label>
                            <div class="col-md-12" id="classes_link">
                              <input type="text" name="classes_link" placeholder="" val=""  
class="form-control" />
                            </div>
                            <span style="color:red;font-size:12px;" id="errNm1"></span>
                          </div>
                        </div>
                      </div>

这是我的脚本标签。在这段代码中，当我替换一个字符串时，我的代码正在工作，但是当我使用多个特殊字符时，我的代码不起作用。

<script>
$('#title_of_class').keyup(function () {
 var title = $(this).val();
 title_link = title.replaceAll([' '], '-');
  title_link_data = title_link.replaceAll(['!','@','|','1','2','3','4','5','6','7','8','9','0','/','[',']','{','}',')','(','#','$','%','^','&','*','+','=',' '], '-');
  $('#classes_link input').val(title_link_data);
  console.log('#classes_link'+ title_link_data);
  });
 </script>

标签： jquery

解决方案

您可以使用regex仅匹配字母 -

正则表达式 - /[^a-zA-Z]/g

$('#title_of_class').keyup(function() {
  var title = $(this).val();
  title = title.replaceAll(/[^a-zA-Z]/g, '-');
  $('#classes_link input').val(title);
});
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div class="row">
  <div class="col-12">
    <div class="form-group" id="title_of_class_form">
      <label class="control-label">Title of Class: </label>
      <div class="col-md-12">
        <input type="text" name="title_of_class" id="title_of_class" class="form-control" autocomplete="off" />
      </div>
      <span style="color:red;font-size:12px;" id="errNm1"></span>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-12">
    <div class="form-group" id="classes_link">
      <label class="control-label">Slug (Permalink): </label>
      <div class="col-md-12" id="classes_link">
        <input type="text" name="classes_link" placeholder="" val="" class="form-control" />
      </div>
      <span style="color:red;font-size:12px;" id="errNm1"></span>
    </div>
  </div>
</div>

推荐阅读