如何使用vanilla JavaScript获得文本的单词密度？_Javascript_Html

如何使用vanilla JavaScript获得文本的单词密度？

javascript html

如何使用vanilla JavaScript获得文本的单词密度？,javascript,html,Javascript,Html,这是我输入文本的地方：单击“计数”按钮后，将转到此页面：我的文字和字数显示出来了。但是，我如何使用vanilla JavaScript获得文本的单词密度，并在这个页面上实际显示它呢这是我的HTML： <!DOCTYPE html> <html> <head> <title>Word Counter</title> </head> <body> &l

这是我输入文本的地方：

单击“计数”按钮后，将转到此页面：

我的文字和字数显示出来了。但是，我如何使用vanilla JavaScript获得文本的单词密度，并在这个页面上实际显示它呢

这是我的HTML：

<!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>


文字计数器
文字计数器


计数
你的文字：

字密度：

JavaScript:

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();
};

constdisplaytext=（）=>{
const inputPage=document.getElementById（“输入页”）；
const countPage=document.getElementById（“计数页”）；
const text=document.getElementById（“文本”）；
const textValue=text.value；
如果（text.value！==“”）{//如果文本区域不是空的，正常流将继续
inputPage.style.display=“无”；
document.getElementById（“显示文本”）.innerText=textValue；
countPage.style.display=“block”；
}否则{//如果文本区域为空，它将发出警告。
警报（“请先输入一些文本。”）
}
常量countWords=（str）=>{
返回str.split（“”）长度；
};
const wordCount=（countWords（textValue））；
常量renderWordCount=（）=>{
const wordCountDiv=document.getElementById（“字数”）；
wordCountDiv.innerHTML=“计算的单词数：”+wordCount+”；
};
renderWordCount（）；
};

要获得@SimoneRossaini所说的单词密度，只需使用一个列表并保存找到每个单词的次数。结果是这样的，例如：

我修改了你的代码并添加了单词density

constdisplaytext=（）=>{
const inputPage=document.getElementById（“输入页”）；
const countPage=document.getElementById（“计数页”）；
const text=document.getElementById（“文本”）；
const textValue=text.value；
如果（text.value！==“”）{//如果文本区域不是空的，正常流将继续
inputPage.style.display=“无”；
document.getElementById（“显示文本”）.innerText=textValue；
countPage.style.display=“block”；
}否则{//如果文本区域为空，它将发出警告。
警报（“请先输入一些文本。”）
}
常量countWords=（str）=>{
返回str.split（“”）长度；
};
const wordCount=（countWords（textValue））；
常量renderWordCount=（）=>{
const wordCountDiv=document.getElementById（“字数”）；
wordCountDiv.innerHTML=“计算的单词数：”+wordCount+”；
};
常量getWordDensity=（str）=>{
让wordList={}；
str.split（/[\s\，]+/）.forEach（word=>{
if（单词列表的类型[单词]=“未定义”）{
单词表[单词]=1；
}
否则{
单词表[单词]+；
}
});
返回词表；
};
const wordDensity=（getWordDensity（textValue））；
常量渲染器密度=（）=>{
const-wordDensityDiv=document.getElementById（“单词密度”）；
让表=”；
for（让单词进入单词密度）{
表+=“”+word+“”+wordDensity[word]+“”；
}
表+=”；
wordDensityDiv.innerHTML=“单词密度：”+表格；
};
renderWordCount（）；
renderWordDensity（）；
};

文字计数器
文字计数器


计数
你的文字：

词密度是什么意思？你想要文本中所有单词的列表以及它们出现的次数吗？你想让我们写算法吗？看方块像素的单词密度？单位是什么？删除逗号和句点。替换（/[，.]/g，”）嘿@dalelandry我想把这个好主意应用到我的代码中。但是你能告诉我在我的代码里放在哪里吗？@ZeddrixFabian，在wordDensity
函数中。正如我在之前的评论中所说，我修改了我的答案，因此它已经包含在发布的代码中。这是第二行str.split（/[\s\，]+/）
。（它基本上与@dalelandry posted相同，只是在另一方面。逗号和句点被删除，因为它们现在也算作单词分隔符。）嘿@miile7，我只想问一下，str.split（/[\s\，]+/）forEach（（word）是什么意思
表示在第29行中？函数创建一个数组，其中每个单词都包含一个值。一个单词由括号中的定义为：“当有一个或多个空格和/或一个点和/或一个逗号时，一个单词结束。”该函数遍历数组中的每个条目，并使用称为“单词”的每个值执行函数。