Javascript-форум - Показать сообщение отдельно

Dilettante_Pro · #6 (**permalink**) 17.06.2019, 18:43

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Обработка текста в web</title>
     <style>
   textarea { resize: none; }
* {
  box-sizing: border-box;
}

.content {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin: 1 auto;
}

.col {
	position: relative;
}

.col:first-child {
  flex-basis: 50%;
}

.col:last-child {
  flex-basis: 50%;
}

.block {
	position: relative;
	padding: 3rem 3rem;
}

/*---*/

.col:first-child .block:nth-child(odd) {
	background: #eee;
}

.col:first-child .block:nth-child(even) {
	background: #ddd;
}

/*---*/

.col:last-child .block:nth-child(even) {
	background: #eee;
}

.col:last-child .block:nth-child(odd) {
	background: #ddd;
}

.section > div {
  display: inline-block;
}
  </style>
 </head>
 <body>
   
 
    <div class="content">
  <div class = "col">
        <div class = "block">
            <p>Введите текст</p>
            <textarea cols = "100" rows = "10" id="area1" name="text1" required placeholder="Введите текст для обработки, затем выберите стиль текста"> 
        </textarea> </div>
        
        <div class = "block">
        <p>Выберите параметры для нового текста:</p>
        <p><input type="radio" name="format" value = "bold"> <b>Жирный</b></p>
        <p><input type="radio" name="format" value = "italic"> <i>Наклонный</i></p>
        <p><input type="radio" name="format" value = "underline"> <ins>Подчеркнутый</ins></p>
        <p><button type "button" onclick = "foo()" value =  "Обработать текст"> Обработать текст</button> </p>      
        </div>
  </div>
  <div class = "col">
        <div class = "block">
            <p>Здесь появится обработанный текст</p>
            <textarea cols = "100" rows = "10" id="area2" name="text2" placeholder="Здесь появится обработанный текст"> </textarea></div>
        <div class = "block">
        <p>Количество слов в тексте: <textarea id="warea" readonly rows = "1" cols = "5"></textarea></p>
        <p>Количество предложений в тексте: <textarea id="sarea" readonly rows = "1" cols = "5"></textarea></p>
        <p>Количество символов в тексте: <textarea id="symarea" readonly rows = "1" cols = "5"></textarea></p>
        <p>Количество цифeр в тексте: <textarea id="narea" readonly rows = "1" cols = "5"></textarea></p>
        <p>Длина текста (в символах): <textarea id="larea" readonly rows = "1" cols = "5"></textarea></p>
        </div></div>
  </div>
 
   </body>
<script type="text/javascript">
  
  function isLetter(c)  { //проверка символа на букву
	return c.toLowerCase() != c.toUpperCase();
  }
  
  function isPunc(c) { //проверка символа на конечный знак препинания
	return (c==".")||(c=="!")||(c=="?");
  }
  
  function countWords(s){ //посчитать кол-во слов
    s = s.replace(/(^\s*)|(\s*$)/gi,"");
    s = s.replace(/[ ]{2,}/gi," ");
    s = s.replace(/\n /,"\n");
	return s.split(' ').length;
}
   
  function countSentences(s) { //посчитать кол-во предложений
    var count = 0;
	for (var i=0; i<s.length; i++){
		if (isPunc(s[i])) count++;
	}
	return count;
  }
  
  function countNumbers(str){ //кол-во цифр
  	return str.length-str.replace(/\d/gm,'').length;
  }

  function prnt(area, str){
  for(var i = 0; i<str.length; i++){
	area.value+=str[i];
	}
  }
	
	function foo(){
		alert ("Hi im start!")
		var text1 = document.getElementById("area1").value;
		var numcount, wordcount, sentencecount, scount; //кол-во цифер, слов, предложений, символов
	
		numcount = countNumbers(text1); 
		wordcount = countWords(text1); 
		sentencecount = countSentences(text1); //предложения
	
		alert("В тексте "+wordcount + " слов, "+sentencecount + " предложений и "+numcount+" цифер.")
	
	
	}
	
  </script>
 </html>