原生js获取form表单数据以及高亮美化JSON输出展示

现在基本项目都以框架为主react和vue之类，这也就导致很多人对原生js的操作变得生疏，甚至有些工作几年的前端基础还是一知半解，问起框架来还能侃侃而谈，面对原生js就吞吞吐吐了。优秀的框架总能吸引一大堆爱好者的追随，但是原生的魅力也需要我们来了解，框架固然好用但是基础知识也要跟上才行，同样是话不多说直接上代码：serialize.js// 获取制定form中的所有表单元素const getFor

jason_renyu

2843人浏览 · 2021-12-15 15:50:51

jason_renyu · 2021-12-15 15:50:51 发布

现在基本项目都以框架为主react和vue之类，这也就导致很多人对原生js的操作变得生疏，甚至有些工作几年的前端基础还是一知半解，问起框架来还能侃侃而谈，面对原生js就吞吞吐吐了。
优秀的框架总能吸引一大堆爱好者的追随，但是原生的魅力也需要我们来了解，框架固然好用但是基础知识也要跟上才行，同样是话不多说直接上代码：
serialize.js

// 获取制定form中的所有表单元素
const getFormElements = (formId) => {
  const form = document.getElementById(formId);
  const tagElements = form.querySelectorAll('input,select,textarea');
  if (tagElements.length > 0) {
    return Array.from(tagElements);
  }
  try {
    console.error(new Error('当前form没有表单内容，请检查后再试'));
  } catch (error) {
    console.log(error);
  }
  return false;
}
// 获取单选多选 选择的值
const getInputSelector = (ele) => {
  if (ele.checked) {
    return [ele.name, ele.value];
  }
}
// 获取input数据
const getInputData = (ele) => {
  const type = ele.type.toLowerCase();
  if (['text', 'password', 'number', 'file', 'color', 'hidden', 'date','search','email','tel','url'].includes(type)) {
    return [ele.name, ele.value];
  } else if (['checkbox', 'radio'].includes(type)) {
    return getInputSelector(ele);
  }
  return false;
}
// 整理数据
const serializeFormData = (ele) => {
  let result = [];
  if (['select', 'textarea'].includes(ele.tagName.toLowerCase())) {
    result = [ele.name, ele.value];
  } else {
    result = getInputData(ele);
  }
  if (result && result[0]) {
    return result;
  }
  return false;
}
// 获取数据方法
const serializeForm = (formId) => {
  const eles = getFormElements(formId);
  const results = {};
  if (!eles) return results;
  for (let i = 0; i < eles.length; i++) {
    const tempData = serializeFormData(eles[i]);
    if (tempData) {
      const key = tempData[0];
      const value = tempData[1];
      if (results[key]) {
        if (typeof results[key] === 'object') {
          results[key].push(value);
        } else {
          results[key] = [results[key], value];
        }
      } else {
        results[key] = value;
      }
    }
  }
  return results;
}

使用例子html代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>原生js获取form数据</title>
  <style>
    pre {
      outline: 1px solid #ccc;
      padding: 5px;
      margin: 5px;
      background-color: #f5f5f5;
    }

    .string {
      color: green;
    }

    .number {
      color: darkorange;
    }

    .boolean {
      color: blue;
    }

    .null {
      color: magenta;
    }

    .key {
      color: red;
    }
  </style>
</head>

<body>
  <form id="loginForm">
    用户名1：
    <input type="text" name="username"><br />
    用户名2:
    <input type="text" name=""><br />
    密码：
    <input type="password" name="password"><br />
    性别：
    <label><input type="radio" name="sex" value="nan">男</label>
    <label><input type="radio" name="sex" value="nv">女</label><br />
    爱好：
    <label><input type="checkbox" name="hobby" value="baseball">篮球</label>
    <label><input type="checkbox" name="hobby" value="football">足球</label>
    <label><input type="checkbox" name="hobby" value="pingbang">乒乓球</label><br />
    城市：
    <select name="city">
      <option value="zhengzhou">郑州</option>
      <option value="luoyang">洛阳</option>
      <option value="nanjing">南京</option>
      <option value="shanghai">上海</option>
    </select><br />
    生日：
    <input type="date" name="birthday"><br />
    喜欢颜色：
    <input type="color" name="color"><br />
    上传照片：
    <input type="file" name="file"><br />
    内容:
    <textarea name="content" cols="30" rows="10"></textarea>
    <br />
    <!-- 隐藏信息 -->
    <input type="hidden" name="phone" value="12345678901">
    <input type="button" onclick="submitFormData()" value="提交">
  </form>
  <!--  -->
  form表单内容:
  <pre id="formData">
  </pre>
</body>
<script src="./serializeForm.js"></script>
<script>
  //高亮美化JSON输出展示
  function syntaxHighlight(json) {
    // 带锁进格式化JSON
    if (typeof json != 'string') {
      json = JSON.stringify(json, undefined, 2);
    }
    // 给JSON字符串增加展示样式
    json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
      var cls = 'number';
      if (/^"/.test(match)) {
        if (/:$/.test(match)) {
          cls = 'key';
        } else {
          cls = 'string';
        }
      } else if (/true|false/.test(match)) {
        cls = 'boolean';
      } else if (/null/.test(match)) {
        cls = 'null';
      }
      return '<span class="' + cls + '">' + match + '</span>';
    });
  }
  function submitFormData() {
    const formData = serializeForm('loginForm');
    console.log('当前form数据信息', formData);
    if (formData) {
      document.getElementById('formData').innerHTML = syntaxHighlight(formData);
    }
  }
</script>

</html>

高亮美化输出JSON

// 高亮美化JSON输出展示
  function syntaxHighlight(json) {
    // 带锁进格式化JSON
    if (typeof json != 'string') {
      json = JSON.stringify(json, undefined, 2);
    }
    // 给JSON字符串增加展示样式
    json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
      var cls = 'number';
      if (/^"/.test(match)) {
        if (/:$/.test(match)) {
          cls = 'key';
        } else {
          cls = 'string';
        }
      } else if (/true|false/.test(match)) {
        cls = 'boolean';
      } else if (/null/.test(match)) {
        cls = 'null';
      }
      return '<span class="' + cls + '">' + match + '</span>';
    });
  }