javascript - 我如何撤消子字符串(例如将文本返回到其正常长度)

Question

请你帮我了解如何撤消子字符串，因为我想在单击按钮(span)时使文本恢复到正常长度，并使用javascript使按钮在单击后消失这是我尝试使用的代码

HTML

<p class="bio">
   Lorem ipsum dolor sit amet, hello how consectetur 
   adipisicing elit. Sint consectetur provident magni 
   yohoho consequuntur, voluptatibus ghdfff exercitationem 
   at quis similique. Optio, amet!
</p>

JavaScript

let bio = document.querySelector('.bio');
const bioMore = document.querySelector('#see-more-bio');
const bioLength = bio.innerText.length;

function bioText() {
   bio.innerText = bio.innerText.substring(0, 100) + "...";
   bio.innerHTML += `<span onclick='addLength()' id='see-more-bio'>See More</span>`;
}
console.log(bioLength)

bioText();

function addLength() {
   bio.innerText = bio.innerText.substring(0, bioLength);
   bioMore.style.display = "none";
}

Answer 1

不幸的是，这是不可能的，因为一旦创建了子字符串，旧字符串就会从计算机内存中删除并且无法恢复。相反，我建议将原始字符串存储在其他地方，然后再将其放回:

const bioMore = document.querySelector('#see-more-bio');
const bioLength = bio.innerText.length;

function bioText() {
   bio.oldText = bio.innerText;
   bio.innerText = bio.innerText.substring(0, 100) + "...";
   bio.innerHTML += `<span onclick='addLength()' id='see-more-bio'>See More</span>`;
}
console.log(bioLength)

bioText();

function addLength() {
   bio.innerText = bio.oldText;
   bioMore.style.display = "none";
}

单击按钮后，简历应返回其原始文本。