How to get a name out of a String in javascript

Question

I have a div element with the following html content:

<div id="status">
    Welcome, bob!
</div>

In my client side javascript file, I want to get the name bob in a variable:

var myName = document.getElementById("status").innerHTML;

Thus removing the first string Welcome, and the last character !, how can I achieve this?

You could just .slice, if its always going to be "Welcome, name!". — user3117575
– user3117575, Commented Jan 3, 2016 at 15:38
if you are generating this code yourself you could make things easier by adding the name to the div-tag and grab it from there. Like data-name=bob or something — RST
– RST, Commented Jan 3, 2016 at 15:40

Community · Accepted Answer · 2017-05-23 12:04:03Z

4

Using `.slice` (simple, probably preferred, method):

If it is always going to be "Welcome, name!", you could use .slice:

var text = document.getElementById("status").innerHTML.trim();
var myName = text.slice(9, -1);

// myName === "bob"

This works with other names too.

<div id="status">
  Welcome, Jamen!
</div>

Would result in myName being "Jamen".

Using `data-*` attributes:

As RST elaborated, you could setup your HTML to make this a lot more simple, if it is yours.

<div id="status" data-name="Jamen">
  Welcome, Jamen!
</div>

With:

var myName = document.getElementById("status").getAttribute("data-name");

Using data-binding libraries:

As a big alternative, you could consider a library that does data-binding. For instance, here is an example using VueJS:

<div id="status">
  Welcome, {{name}}!
</div>

Then we can use:

var status = new Vue({
  el: '#status',
  data: { name: 'Jamen' }
});

// status.name === "Jamen"

Of course, this is probably more than necessary for just this question, since data-binding libraries do a lot more than let you access values in HTML, but it's just a thought if you're doing more beyond what you posted in this question.

edited May 23, 2017 at 12:04

CommunityBot

11 silver badge

answered Jan 3, 2016 at 15:39

user3117575

Sign up to request clarification or add additional context in comments.

1 Comment

Pim Over a year ago

Yes the pattern will remain the same, thanks this works.

guysigner · Accepted Answer · 2016-01-03 16:46:42Z

1

If you don't want to commit to Welcome you can define

function GetLastWordWithoutLastChar(text) {
    var words = text.split(" ");
    return words[words.length - 1].slice(0, -1);
}

and then use

var statusElement = document.getElementById("status");
var myName = GetLastWordWithoutLastChar(statusElement.innerHTML);

answered Jan 3, 2016 at 16:46

guysigner

2,9221 gold badge21 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to get a name out of a String in javascript

2 Answers 2

Using `.slice` (simple, probably preferred, method):

Using `data-*` attributes:

Using data-binding libraries:

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Using .slice (simple, probably preferred, method):

Using data-* attributes:

Using data-binding libraries:

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Using `.slice` (simple, probably preferred, method):

Using `data-*` attributes: