283 lines
13 KiB
HTML
283 lines
13 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title>WebOasis - Tabs to Spaces</title>
|
||
|
|
<meta name="description" content="Convert tabs to spaces for formatting purposes. This tool is helpful if you have a tab-indented text or code in a file and you want it to take up less visible space horizontally. You can control the amount of spaces equivalent to a single tab.">
|
||
|
|
<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>Tabs to Spaces</h1>
|
||
|
|
</header>
|
||
|
|
<hr>
|
||
|
|
<div class="widget-body">
|
||
|
|
<div class="clear">
|
||
|
|
<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_undo"><i class="i-undo"></i> Undo</a>
|
||
|
|
<a href="#" id="edit_redo"><i class="i-redo"></i> Redo</a>
|
||
|
|
<hr>
|
||
|
|
<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-100">
|
||
|
|
<span class="switch left">
|
||
|
|
<input type="checkbox" id="isLeading">
|
||
|
|
<label for="isLeading">Leading only</label>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="w-100 spacer-n xs-spacer-n">
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Replace 1 tab with </label>
|
||
|
|
<input id="numSpaces" type="number" value="4" class="input-sm" style="width:40px">
|
||
|
|
<label>space/s.</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<style>
|
||
|
|
#input_output{height:479px}
|
||
|
|
|
||
|
|
@media (max-width: 768px){
|
||
|
|
#input_output{height:400px}
|
||
|
|
}
|
||
|
|
@media (max-width: 414px){
|
||
|
|
#input_output{height:476px}
|
||
|
|
}
|
||
|
|
@media (max-width: 412px){
|
||
|
|
#input_output{height:471px}
|
||
|
|
}
|
||
|
|
@media (max-width: 384px){
|
||
|
|
#input_output{height:380px}
|
||
|
|
}
|
||
|
|
@media (max-width: 375px){
|
||
|
|
#input_output{height:407px}
|
||
|
|
}
|
||
|
|
@media (max-width: 360px){
|
||
|
|
#input_output{height:380px}
|
||
|
|
}
|
||
|
|
@media (max-width: 320px){
|
||
|
|
#input_output{height:308px}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<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">
|
||
|
|
<span class="left hidden-xs-down" id="instances">Tabs replaced: 0</span>
|
||
|
|
<div class="right xs-100 xs-left">
|
||
|
|
<button id="convertTabs" type="button" class="btn btn-sm xs-50 xs-left">Convert</button>
|
||
|
|
<button id="clearAll" type="button" class="btn btn-sm btn-light xs-50 xs-left">Clear</button>
|
||
|
|
</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>Convert tabs to spaces for formatting purposes. This tool is helpful if you have a tab-indented text or code in a file and you want it to take up less visible space horizontally. You can control the amount of spaces equivalent to a single tab.</p>
|
||
|
|
<header class="widget-header">
|
||
|
|
<h4>Leading Tabs</h4>
|
||
|
|
</header>
|
||
|
|
<hr>
|
||
|
|
<p>Leading tabs only. When enabled, this tool will only convert tabs that are not preceeded by another string (see examples). When disabled, all tabs will be replaced with spaces regardless of placement.</p>
|
||
|
|
<header class="widget-header">
|
||
|
|
<h4>Basic Examples</h4>
|
||
|
|
</header>
|
||
|
|
<hr>
|
||
|
|
Input
|
||
|
|
<pre><code>[tab]</code>Hello<code>[tab]</code>World!</pre>
|
||
|
|
<b>Example 1</b>: Replace with 4 spaces. Leading tabs enabled.
|
||
|
|
<pre><code>[4 spaces]</code>Hello<code>[tab]</code>World!</pre>
|
||
|
|
<p>In the first example above, the <code>tab</code> between the word "Hello" and "World" is ignored because the <code>tab</code> is preceeded by a letter (o).</p>
|
||
|
|
<b>Example 2</b>: Replace with 1 space. Leading tabs disabled.
|
||
|
|
<pre><code>[space]</code>Hello<code>[space]</code>World!</pre>
|
||
|
|
<header class="widget-header">
|
||
|
|
<h4>Notes</h4>
|
||
|
|
</header>
|
||
|
|
<hr>
|
||
|
|
<ul>
|
||
|
|
<li>In the bottom left corner, you can see the amount of tabs that have been replaced.</li>
|
||
|
|
<li>You can use also use tab in the text box.</li>
|
||
|
|
</ul>
|
||
|
|
<header class="widget-header">
|
||
|
|
<h4>Related Tools</h4>
|
||
|
|
</header>
|
||
|
|
<hr>
|
||
|
|
<ul>
|
||
|
|
<li><a href="/spaces-to-tabs"><strong>Spaces to Tabs</strong></a> - Convert spaces to tabs.</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/tabs-to-spaces.js"></script>
|
||
|
|
<script>
|
||
|
|
$('body').ready(function() {
|
||
|
|
$('.accordion > li:eq(5) > a').addClass('active').next().show();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|