我如何撤消子字符串（例如 return 将文本恢复到正常长度）

Question

请你帮我解决如何撤消子字符串的问题，因为我想在单击按钮（跨度）时使文本 return 恢复到正常长度，并使按钮消失使用 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";
}

这应该 return 在您点击按钮后将简介变为原始文本。

Answer 2

你不能这样做。事情是这样的：

字符串被截断
您将 ... 附加到字符串
您覆盖 bio.innerText 的内容。之后您将无法取回内容。

解决方案是将原始的、未修改的文本存储在一个变量中，如下所示：

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

Answer 3

2个问题 1）你必须在某处保存初始值 2) 您不能对尚未添加到 DOM 的项目使用 querySelector，因此一种方法可能是：

let bio = document.querySelector('.bio');
let orgText = bio.innerText;

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

function addLength() {
   bio.innerText = orgText;
}

<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>

Answer 4

您可以做的另一个选择是将各个部分分开并将它们放在有条件地显示需要显示的内容的范围内。然后在点击该选项时翻转可见性。

[...document.querySelectorAll('.bio')].forEach(bio => {
  if (bio.innerText.length <= 100) return;
  
  const more = `
    <span class="ellipsis">...</span>
    <span class="more">${bio.innerText.slice(100)}</span>
    <a href="#" class="show-more">Show More</a>
  `;
  
  bio.innerHTML = bio.innerText.slice(0, 100) + more;
  
  bio.querySelector('.show-more').addEventListener('click', e => {
    e.target.parentNode.classList.add('show-more');
  });
});

.bio:not(.show-more) .more { display: none; }
.bio.show-more .ellipsis, .bio.show-more .show-more { display: none; }

<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>

<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>

我如何撤消子字符串（例如 return 将文本恢复到正常长度）

How do i undo a substring (like return a text back to its normal length)

javascript

html

substring

innertext