V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Eyon
V2EX  ›  问与答

文字实时比对应该用什么思路?

  •  
  •   Eyon · 2020-11-22 16:02:28 +08:00 · 1105 次点击
    这是一个创建于 1453 天前的主题,其中的信息可能已经有所发展或是发生改变。
    亲戚要学电脑,我喊她先学打字。于是就有个练打字小程序的需求,她网购了一个键盘就可以连手机练习了。

    如下图,目前我的方案是实时读取输入文字的长度,和原文所对应长度的切片做比对,如果相等就把原文的切片放入一个 class=red 的 text 标签里。

    但是有个问题,这样要求所有的输入文字都必须正确,如果其中有一个文字不正确都不会变红(因为不相等),请赐教应该用什么思路?

    9 条回复    2020-11-24 09:23:35 +08:00
    LxExExl
        1
    LxExExl  
       2020-11-22 16:31:25 +08:00 via iPhone
    这个没有现成的 app 吗?

    小时候 pc 上有金山打字通

    我还记得第一句话是 when you 开头的...
    jdhao
        2
    jdhao  
       2020-11-22 16:36:11 +08:00 via Android
    直接用电脑打字不就行了,还弄什么手机啊。。楼上说的金山打字通练字多好
    Eyon
        3
    Eyon  
    OP
       2020-11-22 16:38:28 +08:00
    楼上两位都都跑题了。。。
    jdhao
        4
    jdhao  
       2020-11-22 16:39:46 +08:00 via Android
    @Eyon 要打字就解决打字的问题,再搞个小程序,岂不是多此一举。当然你说你有兴趣实现这样的小程序,那肯定没问题啊。🐈
    zxCoder
        5
    zxCoder  
       2020-11-23 10:37:04 +08:00
    意思是不买电脑 先用手机和键盘练习打字?
    lyy16384
        6
    lyy16384  
       2020-11-23 15:24:33 +08:00
    这就是个 diff 功能啊
    不过我觉得逐字对比就够用了,缺点是错位会全报错
    DL9412
        7
    DL9412  
       2020-11-23 15:36:51 +08:00
    切分开来逐字比对?随手写了个,如果不多字漏字是好使的,如果多字漏字的话就不好说了。
    猜个思路,不匹配时向后搜索匹配字符,到标点或句尾则放弃,下一个字符从上个匹配成功的位置开始搜索

    ```
    <style>
    .red{
    color: red;
    }
    </style>
    <div id="textblock"></div>
    <textarea id="inputtext"></textarea>
    <script>
    let text = `但是有个问题,这样要求所有的输入文字都必须正确,如果其中有一个文字不正确都不会变红(因为不相等),请赐教应该用什么思路`
    let inp = document.getElementById('inputtext')
    let textblock = document.getElementById('textblock')

    render()

    inp.oninput = e => render()

    function render(){
    let inputarr = inp.value.split('')
    let arr = text.split('').map((v,i) => v==inputarr[i]?`<span class="red">${v}</span>`:v)
    textblock.innerHTML = arr.join('')
    }
    </script>
    ```
    sevenyangdx
        8
    sevenyangdx  
       2020-11-23 15:50:38 +08:00
    要学电脑,为啥不买台电脑正儿八经的学,要用手机学拼音的话,直接全键盘输入法不就行了么。难道用键盘是带着出门用的。
    Eyon
        9
    Eyon  
    OP
       2020-11-24 09:23:35 +08:00
    @DL9412 非常感谢。

    一直没有想用逐字比对的方案,就觉得一篇文章下来全部拆分文字和标点,运算要求比较高了。当然我即使逐字比对也写不出来你这么漂亮的代码哈,压根儿没学过 js 。map 真是个好东西。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3461 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 04:41 · PVG 12:41 · LAX 20:41 · JFK 23:41
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.