前端如何动态计算输入框内文本的起始位置?

业务场景

在用户输入了描述词语的基础上,用 gpt 进行续写或扩写。然后将其应用到给定时间长度的视频中,作为解说字幕。每个视频可以解说的字幕数量有限,如果到视频结尾还未读完字幕,便不再继续。本文生成案例的提示词以"猫咪"二字为主,视频渲染素材也均为猫咪

概念

  • 建议字数:视频在渲染后能阅读的字幕量(估值),输入框左下角展示的字数
  • 当前字数:输入框右下角展示的字数
  • 截断:如果一个视频是 15-20 秒的,那估计只能阅读 75 字左右(10%+-),超出超出后文本会被截断。也就是说如果建议字数有 75 字,但是生成、输入后一共有 100 字,可能最后 25 个字都会被截断

问题

由于视频的时长是有限的 ,可能只有 15 秒、20 秒,所以可以解说字数也是有限的,语速快一点,可能也就 100 字左右。在第一版的设计中,如果生成字数超出了建议字数限制,我们会直接将后续的内容截断 。但是从实际情况看来,生成的文本中,最后一段话往往是关键句,运营希望能在视频中进行保留,因此我们需要想个方法将最后一段文本的内容记录下来。同时,如果用户在关键句的位置进行了修改,需要保留修改后的关键句。最终,在提交渲染的时候,最后一段话会被保留,文本的截断将从关键句之前开始截断,直到满足建议字数

需求分析

将一段文本分为普通文本与关键句,关键句的位置往往在最后一段/句。如果用户修改后,保留用户修改后的关键句

解决方案

  • \n分隔其他文本与关键句,维护分隔线

接口给过来的文本,是通过 sse 连接的,以前后端每次请求 ai 扩写,只会调用 gpt 一次,现在会调用 gpt生成两次文本,以\n分隔。前端在 sse 中一次性获取,获取的文本以\n分隔,维护一个分隔线

  • 当用户更改文案的时候,动态的计算分割线 的位置,也就是关键句的起始位置。我们需要区分是在其他文本处更改,还是在关键句处更改。因为如果是在其他文本处进行了增删的操作,需要对分隔线进行前移或后移。如果在关键句处更改,不需要动分割线的位置。

比如,一段文本是这样的,"Hi,今天的天气真不错,风和日丽,阳光普照,气温舒适。\n真是个出去玩的好日子!",共 39 个字符,假设说超过 30 个字符就会被截断,但是最后一句话很关键,我们可能希望最终文本哪怕被截断,也能保留最后一句。生成后可能是这样的,"Hi,今天的天气真不错,风和日丽,真是个出去玩的好日子!"。

实现

首先,我们用全文文本搜索\n的位置,获取分割线,获取后一项。当用户在输入框内进行鼠标点击的时候,记录下光标的位置,如果是鼠标框选的,就记录选框后的起始位置

注意,window.getSelection().toString()这个 api,在火狐上似乎不支持,得用 element.selectionStart和 element.selectionEnd,但后者在 chrome 上又不支持。所以文本相关的 api 真的很多坑。

当用户更改的时候,我们去对比当前的字符串和上一次结果。如果光标的起始位置小于分隔线的位置,并且当前文本中还包含完整的关键句,就直接给分割线增减变动响应字数的数字。

效果

我们可以看到,渲染出来的视频,最后一段话是输入框内的最后一句,即关键句。在保留这句话作为关键句的基础上,从后往中间截断,虽然还是会需要截断,但是我们保留了关键句,提升了视频解说字幕的完整性。

未更改

更改过

后记

实现的时候就感觉,这个方式是不是可以应用在一些富文本的产品中,做一些标记处理?本人从来没开发过富文本,但这次稍微体会了一下富文本相关的 api 有多坑,也挺有意思。也许以后可以研究研究。

如果这篇文章对你有帮助,请点赞收藏支持一下,谢谢!!!

相关推荐
腾讯TNTWeb前端团队5 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰8 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪8 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪8 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy9 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom10 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom10 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom10 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom10 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom10 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试