JS文本换行算法-模拟计算文字换行位置-基于DOM元素自发换行行为和字符分割原理-支持实体编码、不支持标签嵌套和富文本

简介

之前在学习HTML的时候一直很想弄清楚HTML内部换行的逻辑,特别是有时候我们想知道一个字符串放入一个DOM元素之后究竟在哪个字符位发生的换行,然后就可以知道在一个固定宽高且隐藏溢出的容器中当前用户看见的字符到底有多少个,具体是哪几个等。然而,原生的HTML并没有提供这个功能,所以就要自己写算法来实现咯。

1.原理解析

1.1 常见HTML换行效果

想要模拟HTML的换行的话,首先要对HTML自发换行的原理有一些了解,在我所学的知识中,HTML的换行逻辑是这样的。对于一个标签内文字的渲染如:

<div style="width: 200px;border: 1px solid #000;">
    1 3&nbsp;sad中文       12o3iaslkdjaksldj aslkdj alskdjklsj    这是一段测试文字,没有什么实际含义。 no sense! 
    123  
</div>

渲染出来的效果是这样的:
html

1.2文本换行相关的因素

简单分析一下html处理换行的逻辑:
首先,截止20190725,HTML中DOM元素内文本换行的逻辑主要和以下几个方面有关:

  1. 容器的宽度width;
  2. 文本的样式,如font-size等;
  3. 容器的空白符处理逻辑,主要是看标签容器的white-space属性;
  4. 容器的单词截断逻辑,主要是看标签容器的word-wrap(或叫overflow-wrap)和word-break属性;
    关于,white-space,word-wrap,word-break这三个属性,大家可以参考下面的文字文章,或自己去实验看看。
    作者:杭电茶娃,链接:https://blog.csdn.net/c11073138/article/details/79534394 ,标题如下:
    常见样式问题七、word-break、word-wrap、white-space区别

1.3HTML换行原理简单分析

一个html标签,如上面1.1中的div,文本换行的时候其实做了如下的操作:
1.取出标签中间的文字存入字符串,去掉首尾空格;
2.根据white-space的空白符逻辑完成空白符替换;
3.根据word-break和word-wrap进行单字或单词分割。
4.渲染出div的宽高和文字的样式,往容器中填充文字,当文字宽度溢出时进行换行。
5.一些额外的细节处理,这里就不说了,大家可以多去实验观察一下,我也是实验试出来的。

1.4我的解决方案

要求外部传入一个字符串str,和需要模拟的容器的样式styles,自动在模拟换行的位置插入\n。具体操作如下:
1.创建一个div容器,将styles样式设置到div上,将str作为div的innerHTML。
2.获取div的innerText作为空白符处理的结果(innerText

  • 5
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
模拟退火算法(Simulated Annealing, SA)是一种被广泛应用于优化问题的启发式算法。而支持向量机(Support Vector Machine, SVM)是一种常用的机器学习算法,可以用于数据回归预测。通过将SA算法与SVM相结合,我们可以得到基于模拟退火算法优化的支持向量机数据回归预测模型(SA-SVM)。 SA-SVM的基本思想是通过SA算法寻找SVM模型中最优的参数或参数组合,以达到最小化预测误差的目标。具体步骤如下: 1. 初始化支持向量机的参数,包括核函数类型、核函数参数和误差损失函数。 2. 利用模拟退火算法生成新的参数组合,并计算相应的预测误差。 3. 比较新的参数组合与当前最优参数组合的预测误差,如果较小则更新为最优参数组合,否则根据一定的概率接受较差的参数组合。 4. 重复步骤2和步骤3,直至达到最大迭代次数或收敛条件。 5. 返回最优参数组合以及对应的预测模型。 SA-SVM的优点在于能够在参数搜索空间中进行全局搜索,避免了陷入局部最优解的问题。此外,SA算法的收敛性和随机性使得该方法适用于各种复杂问题的优化。 需要注意的是,SA-SVM存在一些需要考虑的问题。首先,SA算法的效率较低,对于大规模数据集或复杂的问题可能不适用。其次,SA-SVM对于参数的选择非常敏感,不同的参数组合可能得到不同的结果。因此,在使用SA-SVM进行数据回归预测时,需要根据具体问题进行调参,并进行多次实验以验证结果的稳定性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

月桦剑士

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值