论坛 › 马黑黑教程专版 › 我选择了什么文本

马黑黑 发表于 2024-7-7 07:56

我选择了什么文本

本帖最后由 马黑黑 于 2024-7-7 08:02 编辑 <br /><br /><style>
    .mydiv { margin: 20px auto; padding: 12px; width: 600px; font-size: 20px; border: 1px solid gray;}
    .mydiv p { margin: 12px 0; }
    .tMid { text-align: center; }
</style>

<div class="mydiv">
    <p>可以在这里选择文本，选择方法可以自左向右或自右向左拖蓝，也可以试着不选择任何文本，然后点击底部按钮，看看其后的报告。</p>
    <p>其实在本页面范围内，在任何地方选择文本，和在此div盒子选择文本，效果是一样的。</p>
    <p>原理：利用 selection 和 range 对象加以实现，其中：slection 是选区，range 是选区范围。这两个对象提供足够多的信息，可以充分利用。本演示，简简单单操作一下这两个对象，就能充分体现其功能之强大。</p>
</div>
<p class="tMid"><br><button id="btn" type="button" value="1">我选择了什么文本</button></p>
<p><br></p>
<div id="output" class="tMid">...</div>

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

btn.onclick = () => output.innerHTML = getSelectedText();
</script>

梦江南 发表于 2024-7-7 08:00

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

马黑黑 发表于 2024-7-7 08:07

核心代码：

const getSelectedText = () => {
    let sel = window.getSelection();
    let num = sel.anchorOffset - sel.focusOffset;
    let res = num < 0 ? '自左向右选择' : num > 0 ? '自右向左选择' : '未选择任何文本';
    return res + ' : <br><br>' + sel.toString();
}这是判断用户选择了什么文本、如何选择并将其作为结果返回的自定义函数。调用方法举例（比如有一个 id="msg" 的 div）：

msg.innerText = getSelectedText();

马黑黑 发表于 2024-7-7 08:09

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

红影 发表于 2024-7-7 09:13

这个厉害了，选了什么，下面就会显示出来呢{:4_187:}

南无月 发表于 2024-7-7 09:43

看看老师开发了什么新型武器。。{:4_199:}

南无月 发表于 2024-7-7 09:47

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

马黑黑 发表于 2024-7-7 11:02

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

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

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

马黑黑 发表于 2024-7-7 11:02

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

{:4_190:}

马黑黑 发表于 2024-7-7 11:03

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

还知道你选的方向

马黑黑 发表于 2024-7-7 11:03

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

这是测试

小辣椒 发表于 2024-7-7 14:09

我点击这些文字AI就出来说明了{:4_173:}

樵歌 发表于 2024-7-7 17:07

{:4_203:}

南无月 发表于 2024-7-7 18:59

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

测试成功了{:4_199:}

南无月 发表于 2024-7-7 19:02

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

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

南无月 发表于 2024-7-7 19:03

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

老师悠着点，小心又掉好几根头发{:4_173:}

红影 发表于 2024-7-7 20:37

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

是的，这个太厉害了{:4_187:}

马黑黑 发表于 2024-7-8 10:08

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

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

马黑黑 发表于 2024-7-8 10:18

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

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

马黑黑 发表于 2024-7-8 10:20

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

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

查看完整版本: 我选择了什么文本