Getting Started / 开始 Array / 数组 Number / 数字处理 Call / 调用 Datetime / 时间处理 Debounce / 防抖 EventEmitter / 订阅发布 Filter / 过滤器过滤 script 标签 IsUrl IsEmail IsPhone InArr HasValue IsFunc IsObj Generation / 数据产出 Money / 金钱处理 Other / 其他

Filter / 过滤器

basic-helper 提供了一些常用的数据过滤器

import {
  StripScript, IsUrl, IsFunc, IsObj, IsEmail, IsPhone, InArr, HasValue
} from 'basic-helper/filter';

过滤 script 标签

内容: <span>其他内容</span><script>alert("script 标签")</script>

过滤 script

() => {
  const scriptStr =
    '<span>其他内容</span><script>alert("script 标签")</script>'
  const [content, setContent] = useState(scriptStr)
  return (
    <div>
      <div>内容: {content}</div>
      <hr />
      <span
        className="btn theme mr10"
        onClick={e => {
          console.log(StripScript(content))
          setContent(StripScript(content))
        }}
      >
        过滤 script
      </span>
    </div>
  )
}

() => {
  const scriptStr =
    '<span>其他内容</span><script>alert("script 标签")</script>'
  const [content, setContent] = useState(scriptStr)
  return (
    <div>
      <div>内容: {content}</div>
      <hr />
      <span
        className="btn theme mr10"
        onClick={e => {
          console.log(StripScript(content))
          setContent(StripScript(content))
        }}
      >
        过滤 script
      </span>
    </div>
  )
}

IsUrl

是否 url: true

() => {
  const url = 'https://www.google.com'
  const [isUrl, setCondition] = useState(IsUrl(url))
  return (
    <div>
      <div>是否 url: {isUrl + ''}</div>
      <hr />
      <input
        className="form-control"
        style={{ width: 300 }}
        defaultValue={url}
        onChange={e => {
          const val = e.target.value
          setCondition(IsUrl(val))
        }}
      />
    </div>
  )
}

() => {
  const url = 'https://www.google.com'
  const [isUrl, setCondition] = useState(IsUrl(url))
  return (
    <div>
      <div>是否 url: {isUrl + ''}</div>
      <hr />
      <input
        className="form-control"
        style={{ width: 300 }}
        defaultValue={url}
        onChange={e => {
          const val = e.target.value
          setCondition(IsUrl(val))
        }}
      />
    </div>
  )
}

IsEmail

是否 email: true

() => {
  const email = 'test@gmail.com'
  const [isEmail, setCondition] = useState(IsEmail(email))
  return (
    <div>
      <div>是否 email: {isEmail + ''}</div>
      <hr />
      <input
        className="form-control"
        style={{ width: 300 }}
        defaultValue={email}
        onChange={e => {
          const val = e.target.value
          setCondition(IsEmail(val))
        }}
      />
    </div>
  )
}

() => {
  const email = 'test@gmail.com'
  const [isEmail, setCondition] = useState(IsEmail(email))
  return (
    <div>
      <div>是否 email: {isEmail + ''}</div>
      <hr />
      <input
        className="form-control"
        style={{ width: 300 }}
        defaultValue={email}
        onChange={e => {
          const val = e.target.value
          setCondition(IsEmail(val))
        }}
      />
    </div>
  )
}

IsPhone

是否 phone: true

() => {
  const phone = '13344445555'
  const [isExpected, setCondition] = useState(IsPhone(phone))
  return (
    <div>
      <div>是否 phone: {isExpected + ''}</div>
      <hr />
      <input
        className="form-control"
        style={{ width: 300 }}
        defaultValue={phone}
        onChange={e => {
          const val = e.target.value
          setCondition(IsPhone(val))
        }}
      />
    </div>
  )
}

() => {
  const phone = '13344445555'
  const [isExpected, setCondition] = useState(IsPhone(phone))
  return (
    <div>
      <div>是否 phone: {isExpected + ''}</div>
      <hr />
      <input
        className="form-control"
        style={{ width: 300 }}
        defaultValue={phone}
        onChange={e => {
          const val = e.target.value
          setCondition(IsPhone(val))
        }}
      />
    </div>
  )
}

InArr

元素是否在目标数组中

是否在元素 ["a","b","c","d","e","f"] 中: false

输入数组中的元素验证

() => {
  const target = ['a', 'b', 'c', 'd', 'e', 'f']
  const [isExpected, setCondition] = useState(false)
  return (
    <div>
      <div>
        是否在元素 {JSON.stringify(target)} 中: {isExpected + ''}
      </div>
      <hr />
      输入数组中的元素验证{' '}
      <input
        className="form-control"
        style={{ width: 300 }}
        onChange={e => {
          const val = e.target.value
          setCondition(InArr(target, val))
        }}
      />
    </div>
  )
}

() => {
  const target = ['a', 'b', 'c', 'd', 'e', 'f']
  const [isExpected, setCondition] = useState(false)
  return (
    <div>
      <div>
        是否在元素 {JSON.stringify(target)} 中: {isExpected + ''}
      </div>
      <hr />
      输入数组中的元素验证{' '}
      <input
        className="form-control"
        style={{ width: 300 }}
        onChange={e => {
          const val = e.target.value
          setCondition(InArr(target, val))
        }}
      />
    </div>
  )
}

HasValue

检测目标是否为有效值（包含 0）

是否有效值: false

() => {
  const target = 0
  const [isExpected, setCondition] = useState(false)
  return (
    <div>
      <div>是否有效值: {isExpected + ''}</div>
      <hr />
      <input
        className="form-control"
        style={{ width: 300 }}
        onChange={e => {
          const val = e.target.value
          setCondition(HasValue(val))
        }}
      />
    </div>
  )
}

() => {
  const target = 0
  const [isExpected, setCondition] = useState(false)
  return (
    <div>
      <div>是否有效值: {isExpected + ''}</div>
      <hr />
      <input
        className="form-control"
        style={{ width: 300 }}
        onChange={e => {
          const val = e.target.value
          setCondition(HasValue(val))
        }}
      />
    </div>
  )
}

IsFunc

import { IsFunc } from 'basic-helper/filter'
let func = () => {};
IsFunc(func)

IsObj

import { IsObj } from 'basic-helper/filter'
let func = {};
IsObj(func)