sounisi5011/README.md

## README.md

      
    Raw
  

              README.md
            
          
    入力した文字を逆にするやつ

きっかけ

https://twitter.com/sounisi5011Vore/status/966297976959246337
オンラインサンプル


https://bl.ocks.org/sounisi5011/raw/e6f63b4e5087cd71ba2c766216eff956/
http://bl.ocks.org/sounisi5011/raw/e6f63b4e5087cd71ba2c766216eff956/

特徴


入力した文字の並びを逆にします。
古いブラウザでも動くと思います。ただし、Internet Explorer 9未満は非対応です。
サロゲートペアに対応しています。絵文字も文字化けしません。
結合文字や、アラビア語などの右->左書きの言語には対応してません。


## index.html
<!DOCTYPE html>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<meta name=format-detection content="telephone=no,email=no,address=no">
<title>入力した文字を逆にするやつ</title>
<link rel=stylesheet href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" integrity="sha256-oSrCnRYXvHG31SBifqP2PM1uje7SJUyX0nTwO2RJV54=" crossorigin="anonymous">
<link rel=stylesheet href="main.css">
<main>Loading...</main>
<footer>
  <p><a href="https://gist.github.com/sounisi5011/e6f63b4e5087cd71ba2c766216eff956">View on Gist</a></p>
  <p><small>Copyright &copy; 2018 sounisi5011 All Rights Reserved.</small></p>
  <address>
    Twitter:
    <a href="https://twitter.com/sounisi5011">@sounisi5011</a> /
    <a href="https://twitter.com/sounisi5011Prog">@sounisi5011Prog</a> /
    <a href="https://twitter.com/sounisi5011Vore">@sounisi5011Vore</a>
  </address>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.10/es5-shim.min.js" integrity="sha256-uK1n14nhBO5BLhn2zIXiks+xfK0AtMk613D2R9qbKXI=" crossorigin=anonymous></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hyperapp/1.2.0/hyperapp.js" integrity="sha256-nGvSTSqpX5gJdp7Jv5+4FCU1IbclUByINJqDQIbfwNc=" crossorigin=anonymous></script>
<script src="main.js"></script>

## main.css
footer {
  text-align: center;
}

label {
  display: block;
  margin-top: 1em;
}

input[type="text"], textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

## main.js
'use strict';

/**
 * 文字の順番を逆にした文字列を生成する
 * @param {string} text
 * @return {string}
 */
function reverseText(text) {
  return String(text).match(/[\uD800-\uDBFF][\uDC00-\uDFFF]|.|^$/g).reverse().join('');
}

function main() {
  /** @const {string} */
  var PLACEHOLDER_TEXT = '何か文字を入力するのだ！さあ！！';

  var h = hyperapp.h;
  var app = hyperapp.app;

  var state = {
    idPrefix: ('x-' + Date.now().toString(36) + '-' + Math.random().toString(36).substr(2)),
    output: '',
  };
  var actions = {
    input: function(text) {
      return function(state, actions) {
        return {
          output: reverseText(text)
        };
      };
    }
  };
  var view = function(state, actions) {
    var inputListener = function(e) {
      return actions.input(e.target.value);
    };
    var selectListener = function(e) {
      if (typeof e.target.select === 'function') {
        e.target.select();
      }
    };

    return h('main', {}, [
      h('p', {}, [
        h('label', {htmlFor: (state.idPrefix + '-input')}, '入力欄'),
        h('input', {
          type: 'text',
          id: (state.idPrefix + '-input'),
          placeholder: PLACEHOLDER_TEXT,
          oninput: inputListener,
          onchange: inputListener,
          onblur: inputListener,
          onkeyup: inputListener,
          onmouseup: inputListener,
          onpaste: inputListener
        })
      ]),
      h('p', {}, [
        h('label', {htmlFor: (state.idPrefix + '-output')}, '出力欄'),
        h('textarea', {
          id: (state.idPrefix + '-output'),
          rows: 10,
          readOnly: true,
          placeholder: reverseText(PLACEHOLDER_TEXT),
          value: state.output,
          onfocus: selectListener,
          onselect: selectListener
        })
      ])
    ]);
  };

  app(state, actions, view, document.body);
}

main();
	<!DOCTYPE html>
	<meta charset=utf-8>
	<meta name=viewport content="width=device-width,initial-scale=1">
	<meta name=format-detection content="telephone=no,email=no,address=no">
	<title>入力した文字を逆にするやつ</title>
	<link rel=stylesheet href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" integrity="sha256-oSrCnRYXvHG31SBifqP2PM1uje7SJUyX0nTwO2RJV54=" crossorigin="anonymous">
	<link rel=stylesheet href="main.css">
	<main>Loading...</main>
	<footer>
	<p><a href="https://gist.github.com/sounisi5011/e6f63b4e5087cd71ba2c766216eff956">View on Gist</a></p>
	<p><small>Copyright © 2018 sounisi5011 All Rights Reserved.</small></p>
	<address>
	Twitter:
	<a href="https://twitter.com/sounisi5011">@sounisi5011</a> /
	<a href="https://twitter.com/sounisi5011Prog">@sounisi5011Prog</a> /
	<a href="https://twitter.com/sounisi5011Vore">@sounisi5011Vore</a>
	</address>
	</footer>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.10/es5-shim.min.js" integrity="sha256-uK1n14nhBO5BLhn2zIXiks+xfK0AtMk613D2R9qbKXI=" crossorigin=anonymous></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/hyperapp/1.2.0/hyperapp.js" integrity="sha256-nGvSTSqpX5gJdp7Jv5+4FCU1IbclUByINJqDQIbfwNc=" crossorigin=anonymous></script>
	<script src="main.js"></script>
	footer {
	text-align: center;
	}

	label {
	display: block;
	margin-top: 1em;
	}

	input[type="text"], textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	}
	'use strict';

	/**
	* 文字の順番を逆にした文字列を生成する
	* @param {string} text
	* @return {string}
	*/
	function reverseText(text) {
	return String(text).match(/[\uD800-\uDBFF][\uDC00-\uDFFF]\|.\|^$/g).reverse().join('');
	}

	function main() {
	/** @const {string} */
	var PLACEHOLDER_TEXT = '何か文字を入力するのだ！さあ！！';

	var h = hyperapp.h;
	var app = hyperapp.app;

	var state = {
	idPrefix: ('x-' + Date.now().toString(36) + '-' + Math.random().toString(36).substr(2)),
	output: '',
	};
	var actions = {
	input: function(text) {
	return function(state, actions) {
	return {
	output: reverseText(text)
	};
	};
	}
	};
	var view = function(state, actions) {
	var inputListener = function(e) {
	return actions.input(e.target.value);
	};
	var selectListener = function(e) {
	if (typeof e.target.select === 'function') {
	e.target.select();
	}
	};

	return h('main', {}, [
	h('p', {}, [
	h('label', {htmlFor: (state.idPrefix + '-input')}, '入力欄'),
	h('input', {
	type: 'text',
	id: (state.idPrefix + '-input'),
	placeholder: PLACEHOLDER_TEXT,
	oninput: inputListener,
	onchange: inputListener,
	onblur: inputListener,
	onkeyup: inputListener,
	onmouseup: inputListener,
	onpaste: inputListener
	})
	]),
	h('p', {}, [
	h('label', {htmlFor: (state.idPrefix + '-output')}, '出力欄'),
	h('textarea', {
	id: (state.idPrefix + '-output'),
	rows: 10,
	readOnly: true,
	placeholder: reverseText(PLACEHOLDER_TEXT),
	value: state.output,
	onfocus: selectListener,
	onselect: selectListener
	})
	])
	]);
	};

	app(state, actions, view, document.body);
	}

	main();