我选择了什么文本

马黑黑

可以在这里选择文本，选择方法可以自左向右或自右向左拖蓝，也可以试着不选择任何文本，然后点击底部按钮，看看其后的报告。

其实在本页面范围内，在任何地方选择文本，和在此div盒子选择文本，效果是一样的。

原理：利用 selection 和 range 对象加以实现，其中：slection 是选区，range 是选区范围。这两个对象提供足够多的信息，可以充分利用。本演示，简简单单操作一下这两个对象，就能充分体现其功能之强大。

我选择了什么文本

...

梦江南

谢谢老师无私奉献，早上好！

马黑黑

核心代码：

1. const getSelectedText = () => {
   
2.     let sel = window.getSelection();
   
3.     let num = sel.anchorOffset - sel.focusOffset;
   
4.     let res = num < 0 ? '自左向右选择' : num > 0 ? '自右向左选择' : '未选择任何文本';
   
5.     return res + ' : <br><br>' + sel.toString();
   
6. }

复制代码

这是判断用户选择了什么文本、如何选择并将其作为结果返回的自定义函数。调用方法举例（比如有一个 id="msg" 的 div）：

msg.innerText = getSelectedText();

马黑黑

本例仅针对文本节点。若单纯选择图片或其他非文本元素，报告为未选择；若图文均有选择，仅报告文本被选择的状况。

红影

这个厉害了，选了什么，下面就会显示出来呢

南无月

看看老师开发了什么新型武器。。

南无月

挺智能的小工具，
报告里还可以显示从左往右还是从右往左。。
重要文件操作留痕~~

马黑黑

南无月 发表于 2024-7-7 09:47
挺智能的小工具，
报告里还可以显示从左往右还是从右往左。。
重要文件操作留痕~~

这个测试是为了实时代码着色的pencil code做准备：当前的尝鲜版，回车键逻辑是将就处理的，没有达到原先版本的效果，所以需要研究一下DOM的 selection 对象和range对象。

着色版和前面版本，编辑器有本质区别：前面的版本基于 text-area 纯文本控件，文本只能设置一种颜色，且操作里面的内容相对简单；着色版使用支持HTML代码的容器（比如div或pre等），要操纵里面的内容那是比夜晚数天上的星星还困难，太多太多太多的属性与方法令人眼花缭乱搞不懂这个对哪个。

马黑黑

梦江南 发表于 2024-7-7 08:00
谢谢老师无私奉献，早上好！

马黑黑

红影 发表于 2024-7-7 09:13
这个厉害了，选了什么，下面就会显示出来呢

还知道你选的方向

马黑黑

南无月 发表于 2024-7-7 09:43
看看老师开发了什么新型武器。。

这是测试

小辣椒

我点击这些文字AI就出来说明了

樵歌

南无月

马黑黑 发表于 2024-7-7 11:03
这是测试

测试成功了

南无月

马黑黑 发表于 2024-7-7 11:02
这个测试是为了实时代码着色的pencil code做准备：当前的尝鲜版，回车键逻辑是将就处理的，没有达到原先 ...

想想就难啊。。
比如一个小播，CSS里有关于位置等一切的说明,HTML里也有它，JS里控制的也有它。把小播从上到下全部着同色。这只能人工做到吧。。。
让它自动辨识这些，是比数天上的星星还难得多得多。

南无月

马黑黑 发表于 2024-7-7 11:02
这个测试是为了实时代码着色的pencil code做准备：当前的尝鲜版，回车键逻辑是将就处理的，没有达到原先 ...

老师悠着点，小心又掉好几根头发

红影

马黑黑 发表于 2024-7-7 11:03
还知道你选的方向

是的，这个太厉害了

马黑黑

红影 发表于 2024-7-7 20:37
是的，这个太厉害了

这倒是简单。选区和范围对象，无法像纯文本控件那样可以获取光标在文档中的具体位置，通过编程拿到的又不一定能正常使用，因为从选区和范围对象拿到的文本节点繁多、种类也多，对文本处理非常难以做相关判断，这个头大。

马黑黑

南无月 发表于 2024-7-7 19:03
老师悠着点，小心又掉好几根头发

没什么时间做的，得去捡瓶子

马黑黑

南无月 发表于 2024-7-7 19:02
想想就难啊。。
比如一个小播，CSS里有关于位置等一切的说明,HTML里也有它，JS里控制的也有它。把小播从 ...

你要分清前端三件套的分工。简单讲，CSS负责制定样式，HTML负责组织页面，JS负责动态的东东。