js中根据字数截取字符串,不能截断url

根据你的要求,我将详细讲解“JS中根据字数截取字符串,不能截断URL”问题的解决方案。

问题描述

在web开发中,我们可能会遇到这样的场景:需要在显示文本时截取字符串,限制其最大字数,但是需要保留其中的url地址,也就是说,不能简单的按照字符数截断字符串,而是需要在url出现的位置进行裁剪。例如:

原文本:This is an example of a long text including a url http://www.example.com/that-needs-to-be-partially-truncated. 
目标:This is an example of a long text including a url http://www.example.com/that-needs-...。

如何实现这个功能呢?下面就介绍两种常用的方法。

方法一:使用正则表达式

一种实现方法是使用正则表达式来匹配url地址,并在该地址的末尾进行截取。下面是具体的实现步骤:

  1. 使用正则表达式来检测原文中是否包含url地址,如果有,将其保存下来。
    javascript
    var urlRegex = /(?:https?|ftp|mailto):\/\/[\S]+/g;
    var urls = str.match(urlRegex);
  2. 使用replace()函数将url地址替换成一个占位符,这样就可以方便地对文本进行截取了
    javascript
    var strWithoutUrls = str.replace(urlRegex, '[URL]');
  3. 对截取字符串操作,保证截取的长度不会从url地址中间裁剪
    javascript
    var truncatedStr = strWithoutUrls.substring(0, maxLength);
    truncatedStr = truncatedStr.substr(0, Math.min(truncatedStr.length, truncatedStr.lastIndexOf(' ')));
  4. 将占位符重新替换成url地址
    javascript
    truncatedStr = truncatedStr.replace(/\[URL\]/g, function() {
    return urls.shift();
    });

这样,就可以得到截取后保留url地址的字符串。

方法二:使用DOM操作

另一种方法是利用DOM操作来实现,具体步骤如下:

  1. 创建一个DOM元素,将截取后的字符串赋值给该元素的innerHTML属性
    javascript
    var el = document.createElement('div');
    el.innerHTML = str.substring(0, maxLength);
  2. 判断元素的实际高度是否超过了限定的高度,如果超过,则截取其中文本内容
    javascript
    if (el.offsetHeight > maxHeight) {
    // 截取元素内容,保证不截断URL
    while (el.offsetHeight > maxHeight) {
    el.innerHTML = el.innerHTML.substring(0, el.innerHTML.lastIndexOf(' '));
    }
    el.innerHTML += '...';
    }
  3. 使用innerHTML获取处理后的文本内容
    javascript
    var truncatedStr = el.innerHTML;

这种方法看起来比较麻烦,但是实际上具有更好的浏览器兼容性,也更加精准地处理了HTML文本的渲染。

示例说明

为了更好地理解这两种方法,接下来我们来演示一下使用正则表达式的代码示例以及使用DOM操作的代码示例。

示例一:使用正则表达式

function truncateText(str, maxLength) {
   var urlRegex = /(?:https?|ftp|mailto):\/\/[\S]+/g;
   var urls = str.match(urlRegex);

   var strWithoutUrls = str.replace(urlRegex, '[URL]');
   var truncatedStr = strWithoutUrls.substring(0, maxLength);
   truncatedStr = truncatedStr.substr(0, Math.min(truncatedStr.length, truncatedStr.lastIndexOf(' ')));
   truncatedStr = truncatedStr.replace(/\[URL\]/g, function() {
      return urls.shift();
   });

   return truncatedStr + '...';
};

var text = 'This is an example of a long text including a url http://www.example.com/that-needs-to-be-partially-truncated.';

console.log(truncateText(text, 50));

运行结果:This is an example of a long text including a url http://www.example.com/that-needs-to...

示例二:使用DOM操作

function truncateText(str, maxHeight) {
   var el = document.createElement('div');
   el.innerHTML = str;

   // 计算出需要截取的字符索引
   var length = str.length;
   var low = 0;
   var high = length - 1;
   var index = -1;
   while (low <= high) {
      var mid = Math.floor((low + high) / 2);
      el.innerHTML = str.substring(0, mid + 1);
      if (el.offsetHeight <= maxHeight) {
         index = mid;
         low = mid + 1;
      } else {
         high = mid - 1;
      }
   }

   // 截取字符串,并加上省略号
   var truncatedStr = (index == -1) ? str : str.substring(0, index + 1) + '...';
   return truncatedStr;
};

var text = 'This is an example of a long text including a url http://www.example.com/that-needs-to-be-partially-truncated.';
var maxHeight = 100;

console.log(truncateText(text, maxHeight));

运行结果:This is an example of a long text including a url http://www.example.com/that-needs-to-be-partially-truncated.

以上就是根据字数截取字符串时不能截断url的完整攻略,希望可以帮助到你。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js中根据字数截取字符串,不能截断url - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • 一文读懂TS 中联合类型和交叉类型各自的含义

    一文读懂 TS 中联合类型和交叉类型各自的含义 在 TypeScript 中,联合类型和交叉类型是两种非常重要的概念。它们可以帮助我们更好地描述类型,提高代码的清晰度和健壮性。接下来我们将详细讲解这两种类型的含义和用法。 联合类型 联合类型(Union Types)表示一个值可以是多种类型中的一种。用 | 符号连接多个类型,表示这些类型是可选的,例如: le…

    JavaScript 2023年5月28日
    00
  • jQuery插件Validate实现自定义校验结果样式

    jQuery插件Validate是一款优秀的表单验证插件,广泛应用于Web前端开发领域。本文将详细讲解如何通过自定义校验结果样式,让Web表单更具有美感和可定制性。 1. 安装jQuery插件Validate 首先,需要在项目中引入jQuery和jQuery插件Validate。可以将它们从CDN上引入,也可以下载到本地后引入: <!doctype h…

    JavaScript 2023年6月10日
    00
  • JavaScript字符集编码与解码详谈

    JavaScript字符集编码与解码详谈 在JavaScript中,字符集编码与解码是十分重要的概念。在本文中,我们将从以下几个方面进行详细讲解。 字符集 字符集(Character Set)是一种字符编码的方式。不同的字符集使用不同的编码方式,来将字符映射成二进制数字。JavaScript中支持多种字符集,包括ASCII码、Unicode、UTF-8等。其…

    JavaScript 2023年5月20日
    00
  • 原生js实现日历效果

    原生js实现日历效果 实现日历效果,需要完成以下几个步骤: 获取年月数据 绘制日历框架 填充日期数据 绑定事件 1. 获取年月数据 通过Date()获取当前时间信息,包括年、月、日等信息。 const currentDate = new Date(); let currentYear = currentDate.getFullYear(); let curr…

    JavaScript 2023年5月27日
    00
  • 如何将一个String和多个String值进行比较思路分析

    当我们需要将一个 String 和多个 String 值进行比较时,可以采用以下步骤: 遍历所有的 String 值,对每个值进行比较 使用 equals() 方法判断当前值是否等于目标 String 如果等于,表示匹配成功,执行相应的操作;如果不等于,继续比较其他值 示例1: 假设我们需要判断用户输入的颜色值是否为预设的几种颜色之一,预设的颜色有红、绿、蓝…

    JavaScript 2023年6月10日
    00
  • javascript函数以及基础写法100多条实用整理

    JavaScript函数是一段可以被反复调用执行的代码,这种代码的主要作用是完成一个独立的功能。JavaScript函数具有很高的可重用性和灵活性,常被用来封装一些特定的处理逻辑以便于在需要的时候调用。接下来将为大家介绍JavaScript函数的基础写法,包括参数、返回值、作用域、闭包等内容。 Function基础写法 无参函数 无参函数即不接受任何参数的函…

    JavaScript 2023年5月18日
    00
  • js判断浏览器是否支持严格模式的方法

    判断浏览器是否支持严格模式,我们可以通过以下两种方法来实现。 方法一 我们可以使用try…catch语句,在try语句中编写一个无法在严格模式下执行的代码,然后在catch语句中捕获错误,如果没有捕获到错误就代表浏览器支持严格模式。 示例代码: var isStrictMode; try { eval("’use strict’; var x …

    JavaScript 2023年6月10日
    00
  • ajax jquery 异步表单验证示例代码

    当用户在网站上提交表单时,通常不希望页面重新加载或刷新。通过使用AJAX和jQuery,可以实现异步表单验证。具体攻略如下: 第一步:添加jQuery库 在页面中先添加jQuery库,确保其正常工作。可以从以下链接下载并将其添加到页面中。 <script src="https://code.jquery.com/jquery-3.5.1.mi…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部