javascript使用substring实现的展开与收缩文字功能示例

下面是详细讲解JavaScript使用substring实现的展开与收缩文字功能的完整攻略。

什么是“展开与收缩文字功能”？

“展开与收缩文字功能”指的是一个常见的交互效果，即当页面上某一段文字过长时，可以利用JavaScript代码将其缩短并用一个“展开”按钮控制显示全部内容或隐藏部分内容。这种效果通常用于提升页面的读取体验，避免过多文字占据页面空间。

使用substring实现展开与收缩文字功能

在JavaScript中，可以使用String对象的substring()方法来实现文本的截取，从而达到缩短文字的目的。具体步骤如下：

定义一个用于存储原始文本的变量，例如var originalText = "这是一段过长的文本，需要进行展开与收缩。";
定义一个用于存储截取后的文本的变量，例如var truncatedText = originalText.substring(0, 10) + "..."，其中substring(0, 10)表示从原始文本的第0个字符开始截取，并截取10个字符。
将缩短后的文本插入到页面中，并添加一个“展开”按钮。
给“展开”按钮绑定一个点击事件，点击按钮时，将原始文本完整展示出来。

参考代码如下：

var originalText = "这是一段过长的文本，需要进行展开与收缩。";
var truncatedText = originalText.substring(0, 10) + "...";
document.getElementById("text").innerHTML = truncatedText;

var button = document.getElementById("button");
button.addEventListener("click", function() {
  document.getElementById("text").innerHTML = originalText;
});

示例说明

示例1

在一个网页中，有一段长文本需要进行缩短处理。如果不进行处理，这段文本会占用较多的页面空间，并且在屏幕上不能完整显示。使用substring()方法实现文本缩短，并添加一个“展开”按钮，来控制文本的展开与收缩。当用户点击“展开”按钮时，会将文本全部展示出来。

参考代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>文本展开与收缩功能演示</title>
  <style>
    /* 样式设定，这里省略 */
  </style>
</head>
<body>
  <div id="text"></div>
  <button id="button">展开</button>

  <script>
    var originalText = "这是一段过长的文本，需要进行展开与收缩。";
    var truncatedText = originalText.substring(0, 10) + "...";
    document.getElementById("text").innerHTML = truncatedText;

    var button = document.getElementById("button");
    button.addEventListener("click", function() {
      document.getElementById("text").innerHTML = originalText;
    });
  </script>
</body>
</html>

示例2

在一个网页中，有多篇新闻需要进行展示。其中部分新闻的标题过长，需要进行缩短处理。使用substring()方法实现文本缩短，并添加一个“展开”按钮，来控制新闻标题的展开与收缩。当用户点击“展开”按钮时，会将新闻标题全部展示出来。

参考代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>新闻列表</title>
  <style>
    /* 样式设定，这里省略 */
  </style>
</head>
<body>
  <ul>
    <li>
      <h3>
        <span class="title truncated">这是一篇过长的新闻标题，需要进行展开与收缩。</span>
        <button class="expand-btn">展开</button>
      </h3>
      <p>这是新闻的内容，省略部分...</p>
    </li>
    <li>
      <h3>
        <span class="title">这是一篇普通的新闻标题。</span>
      </h3>
      <p>这是新闻的内容，省略部分...</p>
    </li>
    <li>
      <h3>
        <span class="title truncated">这是另一篇过长的新闻标题，需要进行展开与收缩。</span>
        <button class="expand-btn">展开</button>
      </h3>
      <p>这是新闻的内容，省略部分...</p>
    </li>
  </ul>

  <script>
    var titles = document.getElementsByClassName("title");
    for (var i = 0; i < titles.length; i++) {
      var title = titles[i].innerHTML;
      if (title.length > 10) {
        titles[i].classList.add("truncated");
        var truncatedTitle = title.substring(0, 10) + "...";
        titles[i].innerHTML = truncatedTitle;
        var button = document.createElement("button");
        button.classList.add("expand-btn");
        button.innerHTML = "展开";
        var h3 = titles[i].parentNode;
        h3.appendChild(button);
        button.addEventListener("click", function() {
          var h3 = this.parentNode;
          var title = h3.getElementsByClassName("title")[0];
          var originalTitle = title.innerHTML.substring(0, title.innerHTML.length - 3);
          title.innerHTML = originalTitle;
          this.style.display = "none";
        });
      }
    }
  </script>
</body>
</html>

在这个示例中，使用了一些样式来完成新闻列表的布局。其中，新闻标题被包裹在一个<span>元素内，标题过长时添加了.truncated类，使用了CSS中的文本省略号来表示标题被缩短处理。同时，为每个过长的新闻标题添加了一个“展开”按钮，并添加了.expand-btn类来进行样式设置。

在JavaScript代码中，先使用document.getElementsByClassName("title")获取所有新闻标题，并遍历每个标题。使用title.length > 10来判断标题是否过长，若为真，则对标题进行缩短处理，并添加一个“展开”按钮。当用户点击“展开”按钮时，会将标题全部展示出来，并隐藏“展开”按钮。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript使用substring实现的展开与收缩文字功能示例 - Python技术站