JavaScript / HTML：找到最长的单词并与当前单词进行比较

Question

I'm writing a code that : 我正在写一个代码：

Allow my user to type in a sentence. 允许我的用户输入一个句子。
Find the longest word in that sentence. 找到该句子中最长的单词。
Compare that longest one to every word in the sentence. 将最长的单词与句子中的每个单词进行比较。
The words of the string directly out to a webpage, laid out so that no single line is longer than the longest word in the string. 字符串中的单词将直接显示到网页上，并进行布局，以使没有一行比字符串中最长的单词长。

I've been working this code for two days and feel like completely lost in somewhere. 我已经在这段代码中使用了两天，感觉好像完全迷失在某个地方。 Please advise me to improve my code. 请建议我改善代码。

 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Wrap Text </title> <script> //Determine Longest word and compare to currend word function longWord(string){ var lengthOfString = 0; var arrayOfText = string.split(" "); for ( i = 0; i < arrayOfText.length; i++){ if (arrayOfText[i].length > lengthofString){ lengthOfString = arrayOfText[i].length; } } return lengthOfString; } // Longest vs current word function layoutString(string, length){ var x = 0; var testLength = 0; var testLength = arrayOfText[i].length; do { testLength + 1 + arrayOfText[i].length } while (testLength > longWord); } //Call this function in HTML function wrapText(string) { var length = longWord(string); layoutString(string, length); document.getElementById("demo").innerHTML += arrayOfText + "<br>"; } </script> </head> <body> <h3>Let's Wrap your text!</h3> <!--User Input Section--> <p>Enter Text: <input id="yourValue" value=""></p> <p id="demo"></p> <!--Button executing function--> <button onclick="wrapText(yourValue.value)">Wrap Text</button> </body> </html>

Answer 1

Some issues: 一些问题：

arrayOfText is not accessible in layoutString and wrapText as it is a locale variable of longWord arrayOfText在layoutString和wrapText中不可访问，因为它是longWord的语言环境变量
In layoutString you use longWord (the function name) instead of the parameter length. 在layoutString中，您使用longWord（函数名称）而不是参数长度。
The line "testLength + 1 + arrayOfText[i].length" has no effect, it just adds the three values together but does not assign it to anything. “ testLength + 1 + arrayOfText [i] .length”行无效，它只是将三个值加在一起，但没有将其分配给任何东西。
layoutString generally does nothing ... layoutString通常什么都不做...

I'm not sure about your 4th requirement as all words' length will be less or equal than the longest word's length, so I add hyphens in front of all shorter words so they are all the same length. 我不确定您的第4个要求，因为所有单词的长度都将小于或等于最长单词的长度，因此我在所有较短单词的前面加上连字符，使它们的长度均相同。 Maybe that gets you closer to your final goal. 也许这使您更接近最终目标。

Try this: 尝试这个：

 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Wrap Text </title> <script> //Determine Longest word and compare to current word function longWord(string){ var lengthOfString = 0; var arrayOfText = string.split(" "); for (var i = 0; i < arrayOfText.length; i++){ if (arrayOfText[i].length > lengthOfString){ lengthOfString = arrayOfText[i].length; } } return lengthOfString; } // Longest vs current word function layoutString(string, length){ var arrayOfText = string.split(" "); for (var i = 0; i < arrayOfText.length; i++){ while (arrayOfText[i].length < length) { arrayOfText[i] = '-' + arrayOfText[i]; }; } return arrayOfText; } //Call this function in HTML function wrapText(string) { var longestWordLength = longWord(string), strings = layoutString(string, longestWordLength), demo = document.getElementById("demo"); demo.innerHTML = ''; for (var i = 0; i < strings.length; i++){ demo.innerHTML += strings[i] + "<br>"; } } </script> </head> <body> <h3>Let's Wrap your text!</h3> <!--User Input Section--> <p>Enter Text: <input id="yourValue" value=""></p> <p id="demo"></p> <!--Button executing function--> <button onclick="wrapText(yourValue.value)">Wrap Text</button> </body> </html>

JavaScript / HTML：找到最长的单词并与当前单词进行比较

问题描述

1 个解决方案

解决方案1
0 2018-03-17 16:21:28

JavaScript / HTML：找到最长的单词并与当前单词进行比较

问题描述

1 个解决方案

解决方案1 0 2018-03-17 16:21:28

解决方案1
0 2018-03-17 16:21:28