javascript - 在获取所有控件的值时删除 Jquery 中的 <br/> 标记和按钮文本

Question

我正在尝试使用 JQuery 获取 Form 的所有 HTML 控件的值。这是我的 HTML 代码:

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <div class="col-lg-12">
        <div class="pull-right">
          <input type="text" name="CreatedDate" placeholder="DD/MM/YYYY" class="form-control" />
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <div class="form-group">
        <label class="col-md-2 col-xs-4">
                    Respected  Dr.
                </label>
        <div class="col-md-10 col-xs-8">
          <input type="text" name="txtDoctor" placeholder="Doctor Name" class="form-control" />
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <div class="form-group">
        <label class="col-xs-2">
                    Referring
                </label>
        <div class="col-xs-4 col-md-2">
          <select name="ddlGender" class="form-control">
                        <option value="Mr.">Mr.</option>
                        <option value="Mrs.">Mrs.</option>
                        <option value="Miss">Miss</option>
                    </select>
        </div>
        <div class="col-xs-6 col-md-8">
          <input type="text" name="txtPatient" placeholder="Patient Name" class="form-control" />
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <div class="form-group">
        <label class="col-xs-9 col-sm-8 col-md-6">
                    to you for the favour of your kind consultation of
                </label>
        <div class="col-xs-3 col-sm-4 col-md-6">
          <select name="ddlGender" class="form-control">
                        <option value="his">his</option>
                        <option value="her">her</option>
                    </select>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <div class="form-group">
        <div class="col-xs-3">
          <select name="ddlGender" class="form-control">
                        <option value="his">C/O</option>
                    </select>
        </div>
        <label class="col-xs-9">
                    <input type="text" class="form-control" />
                </label>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <div class="form-group">
        <label class="col-xs-9 col-sm-8 col-md-6">
                    Please do the needful to evaluate the case and treat
                </label>
        <div class="col-xs-3 col-sm-4 col-md-6">
          <select name="ddlGender" class="form-control">
                        <option value="him">him</option>
                        <option value="her">her</option>
                    </select>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <div class="form-group">
        <label class="col-xs-9 col-sm-8 col-md-6">
                    accordingly.
                </label>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <div class="col-lg-12">
        <div class="pull-right text-center">
          <label>
                        Regards and Respect<br />
                        from<br />
                        Dr. Jayesh Hathi
                    </label>
        </div>
      </div>
    </div>
  </div>
  <br />
  <div class="row">
    <div class="col-lg-12">
      <div class="col-xs-4">
        <input type="button" value="Save" class="btn btn-block btn-primary" id="BtnSave" />
      </div>
      <div class="col-xs-4">
        <input type="button" value="Print" class="btn btn-block btn-primary" />
      </div>
      <div class="col-xs-4">
        <input type="button" value="Cancel" class="btn btn-block btn-default" />
      </div>
    </div>
  </div>
</div>

并且使用以下 JQuery，我获得了所有控件的值:

$("#BtnSave").click(function() {
  var values = [];
  $('input,select,label').each(function() {
    if ($(this).val() != "") {
      values.push($(this).val().trim().replace(/<br>/g, " "));
    } else {
      values.push($(this).text().trim().replace(/<br>/g, " "));
    }
  });
  console.log(values);
});

正如您在附图中看到的，我在数组元素中获取了
标记。我想删除它。我已经尝试过用空格替换 br 标签。

另外，我不需要输入类型按钮的文本。我该怎么办？

输出图像:http://prnt.sc/emr80l
代码笔:http://codepen.io/anon/pen/ZexLaX?editors=1111

Answer 1

$("#BtnSave").click(function() {
  var values = [];
  $('input,select,label').each(function() {
    if($(this).attr('type') == 'button')) return true;
    if ($(this).val() != "") {
      values.push($(this).val().trim().replace(/<br>/g, " "));
    } else {
      values.push(($(this).text().trim().replace(/<br>/g, " ")).replace(/\s+/g, " "));
    }
  });
  console.log(values);
});

.replace(/\s+/g, "") 用单个空格替换连续的空格。