Get first and last word in element's text

Question

In JavaScript, how can I get the first and last words from an element's text?

For example:

<div class="content">this is a test</div>// output 'this' 'test'
<p>This is another test</p>// output 'this' 'test'

How can I do that? I am not sure how to use RegExp to match them.

You can loop through the element's text nodes and append their `data` to a string. From there, it would be safe to run a RegExp pattern and get your answer. — , Sep 24 '11 at 15:42
You need to be more specific what your definition of "word" is. If the element text is `This is a test.` is the last word `test` or `test.`? What if the element text is `你好`? Is the last word `好`? — Raymond Chen, Sep 24 '11 at 15:56

score 2 · Answer 1 · edited Jul 31 '12 at 08:01

2

getFirstAndLastWords("this is a test"); // Outputs: "this test"

function getFirstAndLastWords(text) {
  var text_arr = text.split(" ");
  return text_arr[0] + " " + text_arr[text_arr.length-1];
}

edited Jul 31 '12 at 08:01

bluish

26,356
27
122
180

answered Sep 24 '11 at 17:09

MisterGreen

141
4

score 1 · Answer 2 · edited May 23 '17 at 12:12

1

You should try to avoid parsing html with regex. Look at this SO answer RegEx match open tags except XHTML self-contained tags

You can use this regex

var x = '<p>test test1</p>'.replace(/(<[^>]*>)/g,'').split(' ')

x[0] will be first word, x[x.length-1] will be last element

edited May 23 '17 at 12:12

Community

1
1

answered Sep 24 '11 at 15:03

Narendra Yadala

9,554
1
28
43

score 0 · Accepted Answer · answered Sep 24 '11 at 15:12

0

You can use the following regex with combined with replace() in Javascript

/([a-z]+) .* ([a-z]+)/i

Working demo: http://jsfiddle.net/e8yZd/2/

answered Sep 24 '11 at 15:12

Kemal Fadillah

9,760
3
45
63

Sorry? It doesn't seem to be like that. At least not in my browser. It does however add a `
` tag after showing the first and last words from the `
` tag because I wrote the Javascript to do it like so, that way it's a little easier to read the result data. Or perhaps I misunderstood you?
– Kemal Fadillah Sep 24 '11 at 15:23
See http://jsfiddle.net/e8yZd/3/. Your code doesn't perform a **match**, but uses a replace. "this
is ..." starts matching at "is .." using RE `/[a-z] .* [a-z]/`, because the first word isn't immediately followed by a whitespace (` `). A dot, comma or anything similar will also break your code. – Rob W Sep 24 '11 at 15:26
@Rob W aah that...right. Simply remove the first whitespace should fix the problem I guess. But then again, I wouldn't exactly know whether if the OP has the first word followed by a tag like that. – Kemal Fadillah Sep 24 '11 at 15:30

score 0 · Answer 4 · answered Sep 24 '11 at 21:07

0

Better with elements than html.

var text=(element.textContent || element.innerText).match(/\w+/g) ||[];
alert(text[0]+'\n'+text.pop());

answered Sep 24 '11 at 21:07

kennebec

102,654
32
106
127

Get first and last word in element's text

4 Answers4