Kopiere einen Text in das Textfeld und dir werden die Anzahl von Zeichen, Wörter,Leerzeichen und Co angezeigt
Code
<html lang="en">
<head>
<meta charset="utf-8">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<section class="article-details-main mb-5">
<div class="row mx-0 mb-2">
<h1 class="mb-3 p-0">Zeichen und Wörter berechnen</h1>
<form class="form-json-submit" action="#" method="post">
<input type="hidden" name="_token" value="UumUDZRa5U8L8AcmDS8Ss7VI2fCYxEsLwbwXYBJj">
<div class="row">
<div class="col-12">
<div class="mb-3">
<label for="charcter-input" class="form-label">Geben Sie Ihren Text ein und es wird die Anzahl der Zeichen und Wörter angezeigt:</label>
<textarea rows="7" id="charcter-input" class="form-control" required="" data-lt-tmp-id="lt-92478" spellcheck="false" data-gramm="false"></textarea>
</div>
</div>
<div class="col-12">
<ul class="list-inline">
<li class="list-inline-item">
<span>Zeichen: <span class="fw-bold" id="charcter-count">0</span></span>
</li>
<li class="list-inline-item">
<span>Wörter: <span class="fw-bold" id="word-count">0</span></span>
</li>
<li class="list-inline-item">
<span>Leerzeichen: <span class="fw-bold" id="space-count">0</span></span>
</li>
<li class="list-inline-item">
<span>Zeichen ohne Leerzeichen: <span class="fw-bold" id="character-without-count">0</span></span>
</li>
<li class="list-inline-item">
<span>Linien: <span class="fw-bold" id="lines-count">0</span></span>
</li>
<li class="list-inline-item">
<span>Absätze: <span class="fw-bold" id="paragraph-count">1</span></span>
</li>
</ul>
</div>
</div>
</form>
</div>
<div class="row">
<div class="col-12">
<h4>Zeichen und Wörter berechnen</h4><span class="ezoic-autoinsert-video ezoic-under_first_paragraph"></span>
<p>Der Zeichenrechner ist ein einfaches und unkompliziertes Werkzeug, das Details darüber zurückgibt, wie viele Zeichen, Wörter, Leerzeichen, Zeilen und Absätze sich in dem Text befinden, den Sie in den Textbereich eingefügt haben.</p><span class="ezoic-autoinsert-ad ezoic-under_first_paragraph"></span>
<ul>
<li>Die Zeilen werden erst nach dem Punkt-Zeichen (.) erhöht.</li>
<li>Die Absätze werden größer, wenn Sie ein beliebiges Zeichen eingeben.</li>
</ul>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#charcter-input').focus();
var textarea = document.getElementById('charcter-input');
textarea.addEventListener('input', function(event) {
event.preventDefault();
textVal = $(this).val();
textData = getCount(textVal);
$('#charcter-count').text(textData.characters);
$('#word-count').text(textData.words);
$('#space-count').text(textData.spaces);
$('#character-without-count').text(textData.charactersWithoutSpace);
$('#lines-count').text(textData.lines);
$('#paragraph-count').text(textData.paragraphs);
});
});
function getCount(val) {
if (val == '') {
return {
characters: 0,
words: 0,
spaces: 0,
charactersWithoutSpace: 0,
lines: 0,
countParagraphs: 0,
};
}
return {
characters: countCharacters(val),
words: countWords(val),
spaces: countSpaces(val),
charactersWithoutSpace: countCharacters(val) - countSpaces(val),
lines: countLines(val),
paragraphs: countParagraphs(val),
};
}
function countCharacters(text) {
if (text.replace("\n").length == 0) {
return text.replace(/\n/g, "").length;
} else {
return text.replace(/\n/g, "").length;
}
}
function countSpaces(text) {
if (text.split(" ").length - 1 <= 1) {
return text.split(" ").length - 1;
} else {
return text.split(" ").length - 1;
}
}
function countLines(text) {
var amount = 0;
if (text == "") {
amount = 0;
} else if ((text.substring(text.length - 1, text.length) == "?") || (text.substring(text.length - 1, text.length) == "!") || (text.substring(text.length - 1, text.length) == ".")) {
amount = text.replace(/(\.|!|\?)+|(\.|!|\?)+$|(\.|!|\?)+/g, "#").split("#").length - 1;
} else {
amount = text.replace(/(\.|!|\?)+|(\.|!|\?)+$|(\.|!|\?)+/g, "#").split("#").length;
}
if (amount > 1) {
return amount;
} else {
return amount;
}
}
function countWords(text) {
var amount = 0;
if (text == "") {
amount = 0;
} else if ((text.substring(text.length - 1, text.length) == "?") || (text.substring(text.length - 1, text.length) == "!") || (text.substring(text.length - 1, text.length) == " ") || (text.substring(text.length - 1, text.length) == ".")) {
amount = text.replace(/(\.|!|\?| )+|(\.|!|\?| )+$|(\.|!|\?| )+/g, "#").split("#").length - 1;
} else {
amount = text.replace(/(\.|!|\?| )+|(\.|!|\?| )+$|(\.|!|\?| )+/g, "#").split("#").length;
}
if (amount > 1) {
return amount;
} else {
return amount;
}
}
function countParagraphs(text) {
var amount = 0;
if (text == "") {
amount = 0;
} else if (text.substring(text.length - 1, text.length) == "\n") {
amount = text.replace(/\n+|\n+$|(\n)+/g, "#").split("#").length - 1;
} else {
amount = text.replace(/\n+|\n+$|(\n)+/g, "#").split("#").length;
}
if (amount > 1) {
return amount;
} else {
return amount;
}
}
</script>
</body>
</html>