whisper.cat/weboasis/text/add-commas-to-numbers.html

272 lines
12 KiB
HTML
Raw Normal View History

2023-10-05 23:28:32 +11:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WebOasis - Add Commas to Numbers</title>
<meta name="description" content="Use this tool to add commas to numbers in a text. It works by extracting numbers and then applying commas where it's applicable. As a general rule when writing figures, any numbers with more than three digits will have a comma after every third digit (reading from right to left).">
<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>Add Commas to Numbers</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-left xs-100 xs-spacer-n">
<select id="settings" class="input-sm xs-100">
<option value="1">Use comma</option>
<option value="2">Use period</option>
</select>
</div>
</div>
<style>
#input_output{height:522px}
@media (max-width: 768px){
#input_output{height:400px}
}
@media (max-width: 414px){
#input_output{height:552px}
}
@media (max-width: 412px){
#input_output{height:547px}
}
@media (max-width: 384px){
#input_output{height:456px}
}
@media (max-width: 375px){
#input_output{height:483px}
}
@media (max-width: 360px){
#input_output{height:456px}
}
@media (max-width: 320px){
#input_output{height:384px}
}
</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">
<div class="right xs-100 xs-left">
<button id="addCommas" type="button" class="btn btn-sm xs-50 xs-left">Apply</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>Use this tool to add commas or periods to numbers in a text. It works by extracting numbers and then applying commas/periods where they are applicable. As a general rule when writing figures, any numbers with more than three digits will have a comma after every third digit (reading from right to left).
</p>
<p>The tool assumes that the numbers in the text are unformatted but it can detect decimal separators and the fractional part of the number (e.g. 1000<u>.00</u>). Once you applied commas, you cannot use it again to apply periods (for European languages). To revert the changes, use the undo fuction under edit button.</p>
<header class="widget-header">
<h4>Use comma</h4>
</header>
<hr>
<p>In US/UK English, comma is used to separate every third digit and period is used as a decimal separator. This is the default setting.</p>
Before
<pre>1000
1000.00
10000</pre>
After
<pre>1,000
1,000.00
10,000</pre>
<header class="widget-header">
<h4>Use period</h4>
</header>
<hr>
<p>In many European countries, it is the other way around. Period is used as a thousands separator and comma is in place of the decimal point. Use this option for other languages.</p>
Before
<pre>1000
1000,00
10000</pre>
After
<pre>1.000
1.000,00
10.000</pre>
</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/add-commas-to-numbers.js"></script>
<script>
$('body').ready(function() {
$('.accordion > li:eq(5) > a').addClass('active').next().show();
});
</script>
</body>
</html>