React

by b1ncer

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

//"172.168.5.1" => 2896692481

//const format = ip => parseInt(ip.split('.').reduce((prev, curr) => prev + parseInt(curr.trim()).toString(2).padStart(8, '0'), ''), 2)

//适用：点分十进制 IP ，不考虑其他进制。参考 - https://zh.wikipedia.org/wiki/IPv4#地址格式
//不允许前导 0 。参考 - https://www.jiuzhang.com/qa/5716/

const toLegalIpInt = (str) => {
	//not string
  if (typeof str !== 'string') {
  	throw new Error('str must be String.')
  }
  
  //'0'
  if (str === '0') {
  	return 0
  }
  
  //'012'
  if (str[0] === '0') {
  	throw new Error('not a legal ip number.')
  }
  
  const res = ~~str
  
  if (res === 0) {
  	throw new Error('not a legal ip number.')
  }
  
  return res
}

const toBinaryString = ip => {
	const ipArr = ip.split('.')
  if (ipArr.length !== 4) {
  	throw new Error('not a valid ip address.')
  }
  
  return ipArr.reduce((prev, curr) => prev + toLegalIpInt(curr.trim()).toString(2).padStart(8, '0'), '')
}

const format = ip => parseInt(toBinaryString(ip), 2)

const Hello = ({ip}) => <div>{format(ip)}</div>

ReactDOM.render(<Hello ip="172 .168.5 .1" />, document.querySelector("#app"))