322 lines
14 KiB
HTML
322 lines
14 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title>WebOasis - Split Text</title>
|
||
|
|
<meta name="description" content="Undo concatenations by splitting a single-column text into individual columns.">
|
||
|
|
<link rel="icon" href="img/favicon.ico">
|
||
|
|
<link rel="stylesheet" href="css/icons.css">
|
||
|
|
<link rel="stylesheet" href="css/style.css">
|
||
|
|
<script src="js/jquery.js"></script>
|
||
|
|
<style>
|
||
|
|
@font-face {
|
||
|
|
font-family: 'Roboto';
|
||
|
|
font-style: normal;
|
||
|
|
font-weight: 300;
|
||
|
|
src: url('fonts/roboto-v20-latin-300.eot'); /* IE9 Compat Modes */
|
||
|
|
src: local('Roboto Light'), local('Roboto-Light'),
|
||
|
|
url('fonts/roboto-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||
|
|
url('fonts/roboto-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
|
||
|
|
url('fonts/roboto-v20-latin-300.woff') format('woff'), /* Modern Browsers */
|
||
|
|
url('fonts/roboto-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
|
||
|
|
url('fonts/roboto-v20-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
|
||
|
|
}
|
||
|
|
@font-face {
|
||
|
|
font-family: 'Roboto';
|
||
|
|
font-style: normal;
|
||
|
|
font-weight: 400;
|
||
|
|
src: url('fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
|
||
|
|
src: local('Roboto'), local('Roboto-Regular'),
|
||
|
|
url('fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||
|
|
url('fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
|
||
|
|
url('fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
|
||
|
|
url('fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
|
||
|
|
url('fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
|
||
|
|
}
|
||
|
|
@font-face {
|
||
|
|
font-family: 'Roboto';
|
||
|
|
font-style: normal;
|
||
|
|
font-weight: 500;
|
||
|
|
src: url('fonts/roboto-v20-latin-500.eot'); /* IE9 Compat Modes */
|
||
|
|
src: local('Roboto Medium'), local('Roboto-Medium'),
|
||
|
|
url('fonts/roboto-v20-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||
|
|
url('fonts/roboto-v20-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
|
||
|
|
url('fonts/roboto-v20-latin-500.woff') format('woff'), /* Modern Browsers */
|
||
|
|
url('fonts/roboto-v20-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
|
||
|
|
url('fonts/roboto-v20-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<section class="navbar">
|
||
|
|
<div class="nav-wrap">
|
||
|
|
<ul>
|
||
|
|
<li><a href="#" id="app_menu" class="tooltipped tooltipped-s" aria-label="Menu"><i class="i-menu font-24"></i></a></li>
|
||
|
|
</ul>
|
||
|
|
<a href="index.html" class="brand"><h1><b>WebOasis Text</b></h1></a>
|
||
|
|
<ul class="right"><a href="https://weboas.is" class="brand"><h1><b>WebOasis Homepage</b></h1></a></ul>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<div class="mask"></div>
|
||
|
|
<nav id="nav-menu" class="clear">
|
||
|
|
<ul class="accordion">
|
||
|
|
<li class="title">WebOasis</li>
|
||
|
|
<li><a href="index.html">Home</a></li>
|
||
|
|
<li>
|
||
|
|
<a href="#">Basic Tools</a>
|
||
|
|
<ul>
|
||
|
|
<li><a href="sort-text.html"><i class="i-sort"></i>Sort Text</a></li>
|
||
|
|
<li><a href="convert-case.html"><i class="i-case"></i>Convert Case</a></li>
|
||
|
|
<li><a href="find-and-replace.html"><i class="i-find_replace"></i>Find & Replace</a></li>
|
||
|
|
<li><a href="reverse-list.html"><i class="i-reverse_list"></i>Reverse List</a></li>
|
||
|
|
<li><a href="difference-checker.html"><i class="i-compare"></i>Difference Checker</a></li>
|
||
|
|
<li><a href="word-count.html"><i class="i-word_count"></i>Word Count</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#">Text Manipulation</a>
|
||
|
|
<ul>
|
||
|
|
<li><a href="add-prefix-suffix.html"><i class="i-prefix"></i>Add Prefix & Suffix</a></li>
|
||
|
|
<li><a href="add-line-breaks.html"><i class="i-linebreak"></i>Add Line Breaks</a></li>
|
||
|
|
<li><a href="remove-line-breaks.html"><i class="i-remove"></i>Remove Line Breaks</a></li>
|
||
|
|
<li><a href="concatenate-text.html"><i class="i-combine"></i>Concatenate Text</a></li>
|
||
|
|
<li><a href="split-text.html"><i class="i-split i-rotate-90"></i>Split Text</a></li>
|
||
|
|
<li><a href="extract-column.html"><i class="i-column"></i>Extract Column</a></li>
|
||
|
|
<li><a href="swap-columns.html"><i class="i-swap"></i>Swap Columns</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#">Clean Text</a>
|
||
|
|
<ul>
|
||
|
|
<li><a href="remove-spaces.html"><i class="i-extra_space"></i>Remove Spaces</a></li>
|
||
|
|
<li><a href="remove-duplicate-lines.html"><i class="i-format"></i>Remove Duplicate Lines</a></li>
|
||
|
|
<li><a href="remove-empty-lines.html"><i class="i-line_space"></i>Remove Empty Lines</a></li>
|
||
|
|
<li><a href="remove-diacritics.html"><i class="i-remove"></i>Remove Diacritics</a></li>
|
||
|
|
<li><a href="remove-unwanted-characters.html"><i class="i-chars"></i>Remove Unwanted Characters</a></li>
|
||
|
|
<li><a href="strip-html-tags.html"><i class="i-code"></i>Strip HTML Tags</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#">Formatting</a>
|
||
|
|
<ul>
|
||
|
|
<li><a href="add-line-numbers.html"><i class="i-line_numbers"></i>Add Line Numbers</a></li>
|
||
|
|
<li><a href="add-commas-to-numbers.html"><i class="i-abc i-commafy">1,234</i>Add Commas to Numbers</a></li>
|
||
|
|
<li><a href="replace-smart-straight-quotes.html"><i class="i-quote"></i>Replace Smart/Straight Quotes</a></li>
|
||
|
|
<li><a href="tabs-to-spaces.html"><i class="i-tab"></i>Tabs to Spaces</a></li>
|
||
|
|
<li><a href="spaces-to-tabs.html"><i class="i-space"></i>Spaces to Tabs</a></li>
|
||
|
|
<li><a href="pad-text.html"><i class="i-pad"></i>Pad Text</a></li>
|
||
|
|
<li><a href="word-wrap.html"><i class="i-wrap"></i>Word Wrap</a></li>
|
||
|
|
<li><a href="justify-text.html"><i class="i-justify"></i>Justify Text</a></li>
|
||
|
|
<li><a href="center-text.html"><i class="i-center"></i>Center Text</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#">Transform Text</a>
|
||
|
|
<ul>
|
||
|
|
<li><a href="reverse-letters.html"><i class="i-abc i-revtext">cba</i>Reverse Letters</a></li>
|
||
|
|
<li><a href="reverse-words.html"><i class="i-swap"></i>Reverse Words</a></li>
|
||
|
|
<li><a href="upside-down-text.html"><i class="i-abc i-flip i-rotate-180">abc</i>Upside Down Text</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#">Generators</a>
|
||
|
|
<ul>
|
||
|
|
<li><a href="password-generator.html"><i class="i-lock"></i>Password Generator</a></li>
|
||
|
|
<li><a href="filler-text.html"><i class="i-format"></i>Filler Text</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#">More Tools</a>
|
||
|
|
<ul>
|
||
|
|
<li><a href="notepad"><i class="i-notepad"></i>Online Notepad</a></li>
|
||
|
|
<li><a href="cleaner"><i class="i-notepad"></i>Text Cleaner</a></li>
|
||
|
|
<li><a href="base64"><i class="i-notepad"></i>Base64</a></li>
|
||
|
|
<li><a href="url"><i class="i-notepad"></i>URL</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
<main class="wrapper padding-y">
|
||
|
|
<div class="widget w-100">
|
||
|
|
<header class="widget-header">
|
||
|
|
<h1>Split Text</h1>
|
||
|
|
</header>
|
||
|
|
<hr>
|
||
|
|
<div class="widget-body">
|
||
|
|
<div class="clear" id="pre-split">
|
||
|
|
<div class="left hidden-xs-down">
|
||
|
|
<div class="dropdown">
|
||
|
|
<button type="button" class="btn btn-sm dropdown-trigger">File</button>
|
||
|
|
<div class="dropdown-menu">
|
||
|
|
<a href="#" id="file_new"><i class="i-file"></i> New</a>
|
||
|
|
<span class="file-button">
|
||
|
|
<input type="file" id="file_upload" accept=".txt">
|
||
|
|
<label for="file_upload"><i class="i-folder"></i> Open...</label>
|
||
|
|
</span>
|
||
|
|
<a id="file_download"><i class="i-save"></i> Save As...</a>
|
||
|
|
<hr>
|
||
|
|
<a href="#" id="file_print"><i class="i-print"></i> Print</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="dropdown">
|
||
|
|
<button type="button" class="btn btn-sm dropdown-trigger">Edit</button>
|
||
|
|
<div class="dropdown-menu">
|
||
|
|
<a href="#" id="edit_copy"><i class="i-copy"></i> Copy</a>
|
||
|
|
<a href="#" id="edit_delete"><i class="i-close"></i> Delete</a>
|
||
|
|
<a href="#" id="edit_select"><i class="i-select_all"></i> Select All</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="right xs-left xs-100 xs-spacer-n">
|
||
|
|
<select id="settings" class="input-sm xs-100">
|
||
|
|
<option value="1">Split into columns</option>
|
||
|
|
<option value="2">Split by new line</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="clear w-100 spacer-n xs-spacer-n">
|
||
|
|
<div class="form-group left spacer-r xs-100 xs-spacer-n" id="column-num">
|
||
|
|
<label for="colNum">Number of columns:</label>
|
||
|
|
<input id="colNum" type="text" value="4" class="input-sm xs-right" style="width:100px">
|
||
|
|
</div>
|
||
|
|
<div class="form-group left xs-100 xs-spacer-n">
|
||
|
|
<label for="delimitStr">Delimiter:</label>
|
||
|
|
<input id="delimitStr" type="text" value="—" class="input-sm xs-right" style="width:100px">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<style>
|
||
|
|
#input_output{height:479px}
|
||
|
|
|
||
|
|
@media (max-width: 768px){
|
||
|
|
#input_output{height:400px}
|
||
|
|
}
|
||
|
|
@media (max-width: 414px){
|
||
|
|
#input_output{height:467px}
|
||
|
|
}
|
||
|
|
@media (max-width: 412px){
|
||
|
|
#input_output{height:462px}
|
||
|
|
}
|
||
|
|
@media (max-width: 384px){
|
||
|
|
#input_output{height:371px}
|
||
|
|
}
|
||
|
|
@media (max-width: 375px){
|
||
|
|
#input_output{height:398px}
|
||
|
|
}
|
||
|
|
@media (max-width: 360px){
|
||
|
|
#input_output{height:371px}
|
||
|
|
}
|
||
|
|
@media (max-width: 320px){
|
||
|
|
#input_output{height:299px}
|
||
|
|
}
|
||
|
|
.tb_table{width:100%;display:table}
|
||
|
|
.tb_tr{display:table-row}
|
||
|
|
.tb_cell{display:table-cell}
|
||
|
|
.tb_cell textarea{height:100%;height:479px;margin:0;}
|
||
|
|
.tb_cell:not(:last-of-type) textarea{border-right:0 !important}
|
||
|
|
</style>
|
||
|
|
<div class="before">
|
||
|
|
<div id="main">
|
||
|
|
<textarea id="input_output"></textarea>
|
||
|
|
<div class="clipboard"><span class="tooltipped tooltipped-n" aria-label="Click to copy"><i class="i-copy" ></i></span></div>
|
||
|
|
</div>
|
||
|
|
<div class="clear">
|
||
|
|
<div class="right xs-100 xs-left">
|
||
|
|
<button id="splitText" type="button" class="btn btn-sm xs-50 xs-left">Split</button>
|
||
|
|
<button id="clearAll" type="button" class="btn btn-sm btn-light xs-50 xs-left">Clear</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="after none xs-spacer-n">
|
||
|
|
<div class="tb_table spacer-n spacer-s xs-spacer-n xs-spacer-s">
|
||
|
|
<div class="tb_tr"></div>
|
||
|
|
</div>
|
||
|
|
<div class="clear">
|
||
|
|
<div class="right xs-100 xs-left xs-spacer-n">
|
||
|
|
<button id="goBack" type="button" class="btn btn-sm xs-50 xs-left">Go Back</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="clear w-100 margin-y">
|
||
|
|
<article class="widget wm-100 center box-content">
|
||
|
|
<header class="widget-header">
|
||
|
|
<h4>About</h4>
|
||
|
|
</header>
|
||
|
|
<hr>
|
||
|
|
<p>Use this tool to split a text into two columns or more. You can also split text by new line. Please note that you must specify the delimiter whether that be comma, space, or any valid character. Columns must be separated by the same delimiter and follows the same format or it will not properly extract and split the provided data. Undoing the concatenate function in Excel can be time consuming. This tool can be handy when you're trying to unmerge a single-column text.</p>
|
||
|
|
<header class="widget-header">
|
||
|
|
<h3>Split into columns</h3>
|
||
|
|
</header>
|
||
|
|
<hr>
|
||
|
|
<p>This is basically the opposite of <a href="/concatenate-text">concatenate text tool</a>. It extracts each column and places them into individual cells.</p>
|
||
|
|
|
||
|
|
Example: Split first name and last name into two columns using <code>, </code> (comma followed by space) as a delimiter.
|
||
|
|
<pre>Brown, Paul
|
||
|
|
Davis, Mark
|
||
|
|
Smith, James</pre>
|
||
|
|
|
||
|
|
Result
|
||
|
|
<div class="clear">
|
||
|
|
<div class="w-50 left spacer-r">
|
||
|
|
Column 1
|
||
|
|
<pre>Brown
|
||
|
|
Davis
|
||
|
|
Smith</pre>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="w-50 left spacer-l">
|
||
|
|
Column 2
|
||
|
|
<pre>Paul
|
||
|
|
Mark
|
||
|
|
James</pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<header class="widget-header">
|
||
|
|
<h3>Split by new line</h3>
|
||
|
|
</header>
|
||
|
|
<hr>
|
||
|
|
<p>This replaces the delimiter with a line feed (\n). Select this option if you wish to break a text line by line.</p>
|
||
|
|
|
||
|
|
|
||
|
|
Example: Split by new line using comma (,) as delimiter.
|
||
|
|
<pre>Alaska,California,Florida,Hawaii,Indiana,Kentucky</pre>
|
||
|
|
|
||
|
|
Result
|
||
|
|
<pre>Alaska
|
||
|
|
California
|
||
|
|
Florida
|
||
|
|
Hawaii
|
||
|
|
Indiana
|
||
|
|
Kentucky</pre>
|
||
|
|
<header class="widget-header">
|
||
|
|
<h4>Related Tools</h4>
|
||
|
|
</header>
|
||
|
|
<hr>
|
||
|
|
<ul>
|
||
|
|
<li><a href="concatenate-text.html"><strong>Concatenate Text</strong></a> - Combine/merge two documents by concatenating texts line by line.</li>
|
||
|
|
<li><a href="extract-column.html"><strong>Extract Column</strong></a> - Get a specific column from a delimited text.</li>
|
||
|
|
<li><a href="swap-columns.html"><strong>Swap Columns</strong></a> - Swap two columns from a delimited text.</li>
|
||
|
|
</ul>
|
||
|
|
</article>
|
||
|
|
</div>
|
||
|
|
<div class="toast" role="alert"><div class="toast-content"></div></div>
|
||
|
|
</main>
|
||
|
|
<br>
|
||
|
|
<footer class="clear font-14">
|
||
|
|
<div class="wrapper">
|
||
|
|
<div class="center">© WebOasis - Text</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
<script src="js/site.js"></script>
|
||
|
|
<script src="js/split-text.js"></script>
|
||
|
|
<script>
|
||
|
|
$('body').ready(function() {
|
||
|
|
$('.accordion > li:eq(3) > a').addClass('active').next().show();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|