如何从javascript

Question

我有一个带有以下html内容的div元素：

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

在我的客户端javascript文件中，我想在变量中获取名称bob：

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

因此，删除第一个字符串欢迎，和最后一个字符！，我该如何实现？

Answer 1

使用.slice（简单，可能是首选的方法）：

如果它总是“欢迎，名字！”，你可以使用.slice：

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

// myName === "bob"

这也与其他名字一起使用。

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

会导致myName成为"Jamen"。

使用data-*属性：

正如RST详细阐述的那样，您可以设置HTML以使其更简单，如果它是您的。

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

使用：

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

使用数据绑定库：

作为一个重要的替代方案，您可以考虑使用数据绑定的库。例如，以下是使用VueJS：

的示例

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

然后我们可以使用：

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

// status.name === "Jamen" 

当然，对于这个问题来说，这可能不仅仅是必要的，因为数据绑定库比让你在HTML中访问值更有用，但是如果你做的比你发布的更多，那只是一个想法。这个问题。

Answer 2

如果您不想提交欢迎，可以定义

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

然后使用

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