suiheilibe/HistoireSearchMaint.html

## HistoireSearchMaint.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.js"></script>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: 200px;
      grid-gap: 20px;
      gap: 20px;
      width: 800px;
    }
  </style>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    const { useState } = React;
    const doConvert = (input) => {
      const ids = input
        .trim()
        .split(/[ \n]+/)
        .map((v) => {
          // use latest match
          const res = [/^ *-from:(.*)/, /https:\/\/twitter\.com\/([^\/]*)\/?/];
          const id = res.reduce((a, x) => {
            const match = x.exec(v);
            if (match !== null && match.length >= 2) {
              return match[1];
            }
            return a;
          }, v);
          return '    -from:' + id;
        });
      const sortedIds = Object.assign([], ids).sort();
      return '    イストワール\n' + sortedIds.join('\n');
    };
    const App = () => {
      const [ input, setInput ] = useState("");
      const [ output, setOutput ] = useState("");
      const handleInputChange = (event) => {
        setInput(event.target.value);
      };
      const handleConvertClick = () => {
        new Promise((resolve, reject) => {
          setOutput(doConvert(input));
          resolve();
        });
      };
      return (
        <>
          <div className="container">
            <textarea value={ input } onChange={ handleInputChange }></textarea>
            <textarea value={ output } readOnly></textarea>
          </div>
          <button onClick={ handleConvertClick }>Convert</button>
        </>
      );
    };
    ReactDOM.render(<App />, document.getElementById('root'));
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	<script src="https://unpkg.com/@babel/standalone/babel.js"></script>
	<style>
	.container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 200px;
	grid-gap: 20px;
	gap: 20px;
	width: 800px;
	}
	</style>
	</head>
	<body>
	<div id="root"></div>
	<script type="text/babel">
	const { useState } = React;
	const doConvert = (input) => {
	const ids = input
	.trim()
	.split(/[ \n]+/)
	.map((v) => {
	// use latest match
	const res = [/^ -from:(.)/, /https:\/\/twitter\.com\/([^\/]*)\/?/];
	const id = res.reduce((a, x) => {
	const match = x.exec(v);
	if (match !== null && match.length >= 2) {
	return match[1];
	}
	return a;
	}, v);
	return ' -from:' + id;
	});
	const sortedIds = Object.assign([], ids).sort();
	return ' イストワール\n' + sortedIds.join('\n');
	};
	const App = () => {
	const [ input, setInput ] = useState("");
	const [ output, setOutput ] = useState("");
	const handleInputChange = (event) => {
	setInput(event.target.value);
	};
	const handleConvertClick = () => {
	new Promise((resolve, reject) => {
	setOutput(doConvert(input));
	resolve();
	});
	};
	return (
	<>
	<div className="container">
	<textarea value={ input } onChange={ handleInputChange }></textarea>
	<textarea value={ output } readOnly></textarea>
	</div>
	<button onClick={ handleConvertClick }>Convert</button>
	</>
	);
	};
	ReactDOM.render(<App />, document.getElementById('root'));
	</script>
	</body>
	</html>