如何使用普通 JavaScript 获取文本的单词密度？
这是我输入文本的地方：
单击“计数”按钮后，它将转到此页面：
我的文字和字数被显示出来了。但是，我如何使用普通的JavaScript获取此文本的单词密度，并在此页面上实际显示它？
这是我的网页：
<!DOCTYPE html>
<html>
<head>
<title>Word Counter</title>
</head>
<body>
<div id="input-page">
<h1>Word Counter</h1>
<form action="">
<textarea id="text" type="text" rows="22" cols="60"></textarea>
<br />
</form>
<button onclick="displayText()">COUNT</button>
</div>
<div id="count-page" style="display: none;">
<h1>Your Text:</h1>
<p id="display-text"></p>
<div id="word-count"></div>
<div id="word-density">
<h1>Word Density:</h1>
</div>
</div>
</body>
<script src="app.js"></script>
</html>
脚本：
const displayText = () => {
const inputPage = document.getElementById("input-page");
const countPage = document.getElementById("count-page");
const text = document.getElementById("text");
const textValue = text.value;
if (text.value !== "") { // normal flow will continue if the text-area is not empty
inputPage.style.display = "none";
document.getElementById("display-text").innerText = textValue;
countPage.style.display = "block";
} else { // if the text-area is empty, it will issue a warning.
alert("Please enter some text first.")
}
const countWords = (str) => {
return str.split(" ").length;
};
const wordCount = (countWords(textValue));
const renderWordCount = () => {
const wordCountDiv = document.getElementById("word-count");
wordCountDiv.innerHTML = "<h1> Words Counted: " + wordCount + "</h1>";
};
renderWordCount();
};
倚天杖1回答
-
一只甜甜圈
要获得@SimoneRossaini所说的单词密度，只需使用列表并保存找到每个单词的次数即可。例如，这最终是这样的：我修改了您的代码并添加了“密度”一词。const displayText = () => { const inputPage = document.getElementById("input-page"); const countPage = document.getElementById("count-page"); const text = document.getElementById("text"); const textValue = text.value; if (text.value !== "") { // normal flow will continue if the text-area is not empty inputPage.style.display = "none"; document.getElementById("display-text").innerText = textValue; countPage.style.display = "block"; } else { // if the text-area is empty, it will issue a warning. alert("Please enter some text first.") } const countWords = (str) => { return str.split(" ").length; }; const wordCount = (countWords(textValue)); const renderWordCount = () => { const wordCountDiv = document.getElementById("word-count"); wordCountDiv.innerHTML = "<h1> Words Counted: " + wordCount + "</h1>"; }; const getWordDensity = (str) => { let wordList = {}; str.split(/[\s\.,]+/).forEach(word => { if(typeof wordList[word] == "undefined"){ wordList[word] = 1; } else{ wordList[word]++; } }); return wordList; }; const wordDensity = (getWordDensity(textValue)); const renderWordDensity = () => { const wordDensityDiv = document.getElementById("word-density"); let table = "<table>"; for(let word in wordDensity){ table += "<tr><td>" + word + "</td><td>" + wordDensity[word] + "</td></tr>"; } table += "</table>"; wordDensityDiv.innerHTML = "<h1> Word Density: </h1>" + table; }; renderWordCount(); renderWordDensity();};<!DOCTYPE html><html> <head> <title>Word Counter</title> </head> <body> <div id="input-page"> <h1>Word Counter</h1> <form action=""> <textarea id="text" type="text" rows="22" cols="60"></textarea> <br /> </form> <button onclick="displayText()">COUNT</button> </div> <div id="count-page" style="display: none;"> <h1>Your Text:</h1> <p id="display-text"></p> <div id="word-count"></div> <div id="word-density"></div> </div> </body> <script src="app.js"></script></html>
随时随地看视频慕课网APP
相关分类
JavaScript