从 div 获取 innerText 到输入 javascript

Question

我正在尝试将具有相同类名的div中的每个用户名逐个复制到输入字段中。

我得到了它，它将在单击按钮时将所有文本从div 复制到输入，但是我如何分隔用户名？

将名称一个接一个地复制到输入中，因此如果我按下按钮，它会将名称 1 复制到输入，如果我再次按下按钮，它会将名称 2 复制到输入但删除名称1，如果再次按下，它会将名称 3 复制到输入并删除名称 2

如何拆分，使其仅复制一个用户名进行输入？

var elems = document.getElementsByClassName("leaders");
var counter = elems.length;
function getUsers() {
var Elem;
if (counter <= 0)
counter = elems.length;
Elem = elems[counter - 1];
document.getElementById("inp").value = Elem.innerText.split(" — ")[0].split(", ");
counter--;
}

<div class="user-list">
<div class="leaders">user 1, user 2, user 3, user 4 — <strong>1</strong></div>
<div class="leaders">user 5, user 6, user 7, user 8 — <strong>2</strong></div>
<div class="leaders">user 9, user 10, user 11, user 12 — <strong>3</strong></div>
<div class="leaders">user 13, user 14, user 15, user 16 — <strong>4</strong></div>
<div class="leaders">user 17, user 18, user 19, user 20 — <strong>5</strong></div>
</div>
<br>
<input type="text" id="inp" style="width: 40%;"> &nbsp;
<button style="width: 40%;" onclick="getUsers();">copy user name to input</button>

Answer 1

var elems = document.getElementsByClassName("leaders");
var counter = elems.length;
var arrayLength=0;
var maxLengthArray=0;
function getUsers() {
var Elem;
if (counter <= 0)
counter = elems.length;
Elem = elems[counter - 1];
document.getElementById("inp").value = Elem.innerText.split(" — ")[0].split(", ")[arrayLength];
maxLengthArray=Elem.innerText.split(" — ")[0].split(", ").length;
if(maxLengthArray==arrayLength){
arrayLength=0;
counter--;
}else{
arrayLength++;
}
}

<div class="user-list">
<div class="leaders">user 1, user 2, user 3, user 4 — <strong>1</strong></div>
<div class="leaders">user 5, user 6, user 7, user 8 — <strong>2</strong></div>
<div class="leaders">user 9, user 10, user 11, user 12 — <strong>3</strong></div>
<div class="leaders">user 13, user 14, user 15, user 16 — <strong>4</strong></div>
<div class="leaders">user 17, user 18, user 19, user 20 — <strong>5</strong></div>
</div>
<br>
<input type="text" id="inp" style="width: 40%;"> &nbsp;
<button style="width: 40%;" onclick="getUsers();">copy user name to input</button>

我希望这是您的预期结果。

Answer 2

function getUsers() {
//to remove strong tags
var nodes = document.getElementsByTagName("strong");
for (var i = 0, len = nodes.length; i != len; ++i) {
nodes[0].parentNode.removeChild(nodes[0]);
}
var nameArray = "";
var elems = document.getElementsByClassName("leaders");
if (elems) {
for (x = 0; x < elems.length; x++) {
var res = elems[x].innerText;
nameArray = res.split(",");
inp.value += nameArray;
}
}
}

<div class="user-list">
<div class="leaders">user 1, user 2, user 3, user 4 — <strong>1</strong></div>
<div class="leaders">user 5, user 6, user 7, user 8 — <strong>2</strong></div>
<div class="leaders">user 9, user 10, user 11, user 12 — <strong>3</strong></div>
<div class="leaders">user 13, user 14, user 15, user 16 — <strong>4</strong></div>
<div class="leaders">user 17, user 18, user 19, user 20 — <strong>5</strong></div>
</div>
<br>
<input type="text" id="inp" style="width: 40%;">
&nbsp;
<button style="width: 40%;" onclick="getUsers();">copy user name to input</button>

Answer 3

您可以使用split()拆分用户并将它们添加到单独的数组中，然后在需要时使用concat()合并它们，并使用所需的分隔符：

function getUsers() {
var users = [];
var el = document.getElementsByClassName("leaders");
if (el.length) {
for (x = 0; x < el.length - 1; x++) {
users = users.concat(el[x].innerText.split(" — ")[0].split(", "))
}
}
document.getElementById("inp").value = users.join(' - ');
console.log(users);
}

<input type="text" id="inp" style="width: 100%;"> &nbsp;
<button onclick="getUsers();">copy user name to input</button>
<br>
<div class="user-list">
<div class="leaders">user 1, user 2, user 3, user 4 — <strong>1</strong></div>
<div class="leaders">user 5, user 6, user 7, user 8 — <strong>2</strong></div>
<div class="leaders">user 9, user 10, user 11, user 12 — <strong>3</strong></div>
<div class="leaders">user 13, user 14, user 15, user 16 — <strong>4</strong></div>
<div class="leaders">user 17, user 18, user 19, user 20 — <strong>5</strong></div>
</div>