I've looked all over the web but couldnt find a good answer to this. I need to write a function that finds the first word in a string/sentence. Its in relation to a html/css/javascript assignment, where i need to color or mark the first word in a long string, containing a story.

I'm thinking a simple for loop could do it, but cant get it to work.

I've looked all over the web but couldnt find a good answer to this. I need to write a function that finds the first word in a string/sentence. Its in relation to a html/css/javascript assignment, where i need to color or mark the first word in a long string, containing a story.

I'm thinking a simple for loop could do it, but cant get it to work.

• javascript
• css

• 3 Please, add to your question the code you already tried or the code your are thinking on try. Also, read How to Ask – Calvin Nunes Commented Nov 7, 2018 at 15:03

5 Answers 5

The String global object is a constructor for strings or a sequence of characters.

in javascript String object has methods on his prototype - MDN - String

String.prototype.split() - Reference (MDN)

The split() method splits a String object into an array of strings by separating the string into substrings, using a specified separator string to determine where to make each split.

because you want to split by words, you should split string by "space". as you can see split method on string return an array, so the first item in array will be the first word.

  'Some String Here'.split(' ')[0];

Good Luck!

// Get Results Element
var div = document.querySelector('.results');
// Some string
var someString = 'Hi Hello JavaScript World';

function renderFirstWorkAsMarked(string, color) {
  var splitedString = string.split(' ');
  var wrapper = document.createElement('div')
  var marked = document.createElement('span');
  var restString = document.createTextNode(splitedString.slice(1).join(' '))
  
  marked.style.color = color;
  marked.innerHTML = `${splitedString[0]} `;
  wrapper.appendChild(marked)
  wrapper.appendChild(restString)
  
  return wrapper
}

// append on screen
div.append(renderFirstWorkAsMarked(someString, 'red'))

// This is example code for your full question.

<div class="results"></div>

This will do the trick. It splits the string by the whitespace and then provides you the first word using the index.

"Plane Jane Mane".split(" ")[0]

Here's an example, the first console log will show you the formed array, and the second will select the first word in the array:

var word = "Plane Jane Mane"
console.log(word.split(" "))
console.log(word.split(" ")[0])

I answer your question with ES6 arrow function. see below code:

const firstWord = string => string.split(' ')[0];

Or you can use regex but I prefer the first function:

const firstWord = string => string.match(/^[\w\d]+/gs)[0];

let string = 'This is a sentence';
let word = string.split(' ')[0];
console.log(word);

Firstly, split sentences. Secondly, Split words and take first:

yourtext
    .split(/(?<!\w\.\w.)(?<![A-Z][a-z]\.)(?<=\.|\?)\s/g)
    .map(w => w.split(/((\b[^\s]+\b)((?<=\.\w).)?)/g)[1])

Example

I've looked all over the web but couldnt find a good answer to this. I need to write a function that finds the first word in a string/sentence. Its in relation to a html/css/javascript assignment, where i need to color or mark the first word in a long string, containing a story.

I'm thinking a simple for loop could do it, but cant get it to work.

Result

I've,I,Its,I'm