Malleys,
последний вопрос. как сделать вывод слов после обработки текста выглядит так: СУБЪЕКТ,1279, души,578, жизни,514, чтобы,331, которые,307, когда,287, меня,269, время,232, Земле,224, того,204
как мне сделать чтобы выводило как в этой картинке
https://ibb.co/1XzmBb2
например слева слова, а справа количество слов:
СУБЪЕКТ-------------1279
души-------------578
жизни-------------514
чтобы-------------331
которые-------------307
и т.д
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>file</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div>
<div id="drop-area">
Drag and drop file here
</div>
<output id="log-div"></output>
</div>
<div class="file-read">
<div class="file-input">
<label class="custom-file-upload">
<input type="file" onchange="show(this)">
Upload a file
</label>
</div>
<a href="">Reset</a>
</div>
<div class="output-info">
<output id="info"></output>
</div>
<script src="https://unpkg.com/lodash@4.17.21/lodash.min.js"></script>
<script>
function show(input) {
const file = input.files;
let info = document.querySelector("output#info");
for (const el of file) {
const reader = new FileReader();
reader.readAsText(el);
reader.onload = () => {
const res = _.words(reader.result, /[-а-яё]{4,}/gim);
const result = _.flow([
_.countBy,
_.toPairs,
_.partial(_.orderBy, _, 1, 'desc'),
_.partial(_.take, _, 10),
]);
info.append(`${result(res).join(", ")}\n`);
};
}
}
</script>
</body>
</html>
#drop-area {
border: 4px dashed gray;
padding: 100px;
margin-top:10px;
text-align: center;
font-size: 40px;
color: gray;
}
.file-read{
margin-top:30px;
text-align: center;
}
.file-input{
}
.custom-file-upload{
border: 4px solid green;
background: green;
border-radius: 5px;
color: white;
padding: 10px 45px;
position: absolute;
left: 190px;
}
div.file-input label:hover{
background: #1e6225;
color: #ff044c;
}
a{
text-decoration: none;
border: 4px solid green;
background: green;
border-radius: 5px;
color: white;
padding: 10px 65px;
position: absolute;
right: 190px;
}
a:hover {
background: #1e6225;
color: #ff044c;
}
.output-info{
margin-top: 100px;
text-align: center;
}
#info{
white-space: pre-line;display: block;
}
input[type="file"] {
display: none;
}