Расщепление строки, прежде чем найти самое длинное слово

Question

Я прочитал несколько разных сообщений на эту тему, поэтому мне жаль снова спрашивать об этом, но ни одна из них не решила мою проблему.

Я пытаюсь вытянуть длину самого длинного слова в строке, это исходит из HTML.

Все, что я могу получить, это "Uncaught TypeError: Невозможно прочитать свойство 'split' of undefined"

HTML:

<p id="p">I'm looking for the longest length of a word in this sentence</p>
<button onclick="longestWordFunc()">Click</button>

JS:

var myString = document.getElementById("p");


function longestWordFunc(myString) {
  var stringSplit = myString.split(" ");
  var longestWord = 0;

  for(var i = 0; i < stringSplit.length; i++){
    if(longestWord >= stringSplit[i].length){

      longestWord = stringSplit[i].length;   
    }
   }

  return longestWord;
 }

Answer 1

Попробуйте это:

 <p id="p">I'm looking for the longest length of a word in this sentence</p>
 <button onclick="longestWordFunc()">Click</button>

В вашем JS попробуйте добавить .innerHTML в конец вашей функции myString.Также он проверял, чтобы 0 было больше или равно текущему элементу stringSplit.

 function longestWordFunc() {
     var myString = document.getElementById("p").innerHTML;
     var stringSplit = myString.split(" ");
     var longestWord = 0;

    for(var i in stringSplit) {
        if(longestWord <= stringSplit[i].length){
        longestWord = stringSplit[i].length;   
    }
    return longestWord;
 }

Answer 2

Использование Reduce, как объяснил Адриан, является отличным способом достижения вашей цели в JS.

Но если ваша цель заключалась в изучении некоторых основ кодирования, вот несколько советов о том, как сделать ваш текущий кодработа.

function longestWordFunc() {
  var myString = document.getElementById("p").innerText; // Just the inner text

  var stringSplit = myString.split(" ");
 
  var longestWord = 0; //Index of longest word
  var longestLength=0; //Length of longest word
  for(var i = 0; i < stringSplit.length; i++){
    if(stringSplit[i].length>longestLength){ // The other way around
      longestLength = stringSplit[i].length;   
      longestWord=i;
    }
   }
  console.log(stringSplit[longestWord]);
  return stringSplit[longestWord];
 }

<p id="p">I'm looking for the longest length of a word in this sentence</p>
<button onclick="longestWordFunc()">Click</button></br>

Answer 3

Я вижу одну проблему и одну возможную.

1. Неравенство перевернуто, должно быть longestWord < stringSplit[i].length

2. Возможно, вы определяетеmyString до того, как элемент создан?(Например, в главе HTML).Возможно, поэтому myString не определено.Одним из решений этого является перемещение определения в вызов функции, чтобы myString определялся только при нажатии кнопки.

   function longestWordFunc() {
     var myString = document.getElementById("p")
     var stringSplit = myString.textContent.split(" ");
     var longestWord = 0;
   
     for(var i = 0; i < stringSplit.length; i++){
       if(longestWord < stringSplit[i].length){
   
         longestWord = stringSplit[i].length;   
       }
      }
   
     return longestWord;
   }
   

Answer 4

Попробуйте это:

var text = "I'm looking for the longest length of a word in this sentence"

findLongestWord = (str) => {
  let split = str.split(" ");
  let longest = "";
  split.forEach((word) => {
    if (word.length > longest.length) {
      longest = word;
    }
  });
  return longest;
}

let longest = findLongestWord(text);
console.log(`Longest Word: ${longest} - ${longest.length}`);

Если вы просто хотите получить длину самого длинного слова вместо того, чтобы возвращать само слово, вы можете заставить функцию findLongestWord возвращать это:

return longest.length

Hopeэто помогает.

Answer 5

Используйте Reduce для перебора массива, начинающегося с пустой строки, и возврата самого длинного из двух на каждой итерации.

Причина, по которой вы получаете неопределенную ошибку, заключается в том, что myString является параметром вашей функции ивы ничего не пропускаете в него, поэтому не определены.

var myString = document.getElementById("p").innerText;


function longestWordFunc() {
  return myString.split(" ").reduce((longest, current) => current.length > longest.length ? current : longest, '');
}

<p id="p">I'm looking for the longest length of a word in this sentence</p>
<button onclick="console.log(longestWordFunc())">Click</button>