Как развернуть текст через скрипт на JS?

Question

Как развернуть текст через скрипт на JS?

Рейтинг: -1Ответов: 1Опубликовано: 20.07.2023

Помогите написать скрипт js
Есть параграф текста, который нужно ограничить до 200 символов
в конце данного текста ссылка "Развернуть" по клику на который открывается полная версия данного текста, то есть продолжение текста после 200 символа
Ссылка "Свернуть" не нужна!
Точно так как это сделано в фейсбук

<p id="shortText">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec mi eget nisi rhoncus efficitur sit amet at quam. Cras non venenatis ipsum, in dictum libero. Aenean gravida tristique ultrices.
<a href="#" id="expandLink" onclick="expandText()">Развернуть</a>

<script>
 function expandText() {
  var shortText = document.getElementById('shortText');
  var expandLink = document.getElementById('expandLink');

  var fullText = shortText.textContent;
  if (fullText.length > 200) {
    var truncatedText = fullText.substring(0, 200);
    var remainingText = fullText.substring(200);
    shortText.innerHTML = truncatedText + '<span id="extraText">' + remainingText + 
 '</span>';
      expandLink.style.display = 'none';
  }
}
 </script>

javascript

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Можно реализовать таким образом:

var shortText = document.getElementById('shortText');

var fullText = shortText.textContent;

if (fullText.length > 200) {
  var truncatedText = fullText.substring(0, 200);
  var remainingText = fullText.substring(200);
  shortText.innerHTML = truncatedText + '<a href="#" id="expandLink">Развернуть</a>';

  var expandLink = document.getElementById('expandLink');

  expandLink.addEventListener('click', function() {
    shortText.innerHTML = truncatedText + '<span id="extraText">' + remainingText + '</span>';
  })
}

<p id="shortText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec mi eget nisi rhoncus efficitur sit amet at quam. Cras non venenatis ipsum, in dictum libero. Aenean gravida tristique ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec mi eget nisi rhoncus efficitur sit amet at quam. Cras non venenatis ipsum, in dictum libero. Aenean gravida tristique ultrices.</p>

Если параграфов много:

var shortTexts = document.querySelectorAll('.shortText'); //Получаем все параграфы по классу

shortTexts.forEach((shortText) => { //Проверяем каждый параграф по очереди на длину
  var fullText = shortText.textContent;

  if (fullText.length > 200) {
    var truncatedText = fullText.substring(0, 200);
    var remainingText = fullText.substring(200);
    shortText.innerHTML = truncatedText + '<a href="#" class="expandLink">Развернуть</a>';
  
    var expandLink = shortText.querySelector('.expandLink'); //Получаем ссылку которая находится внутри параграфа
  
    expandLink.addEventListener('click', function() {
      shortText.innerHTML = truncatedText + '<span class="extraText">' + remainingText + '</span>';
    })
  }
})

<p class="shortText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec mi eget nisi rhoncus efficitur sit amet at quam. Cras non venenatis ipsum, in dictum libero. Aenean gravida tristique ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec mi eget nisi rhoncus efficitur sit amet at quam. Cras non venenatis ipsum, in dictum libero. Aenean gravida tristique ultrices.</p>
<p class="shortText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec mi eget nisi rhoncus efficitur sit amet at quam. Cras non venenatis ipsum, in dictum libero. Aenean gravida tristique ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec mi eget nisi rhoncus efficitur sit amet at quam. Cras non venenatis ipsum, in dictum libero. Aenean gravida tristique ultrices.</p>
<p class="shortText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec mi eget nisi rhoncus efficitur sit amet at quam. Cras non venenatis ipsum, in dictum libero. Aenean gravida tristique ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec mi eget nisi rhoncus efficitur sit amet at quam. Cras non venenatis ipsum, in dictum libero. Aenean gravida tristique ultrices.</p>
<p class="shortText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec mi eget nisi rhoncus efficitur sit amet at quam. Cras non venenatis ipsum, in dictum libero. Aenean gravida tristique ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec mi eget nisi rhoncus efficitur sit amet at quam. Cras non venenatis ipsum, in dictum libero. Aenean gravida tristique ultrices.</p>

Как развернуть текст через скрипт на JS?

Ответы