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

[Eyon]

亲戚要学电脑，我喊她先学打字。于是就有个练打字小程序的需求，她网购了一个键盘就可以连手机练习了。

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

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

[LxExExl]

这个没有现成的 app 吗？

小时候 pc 上有金山打字通

我还记得第一句话是 when you 开头的...

[jdhao]

直接用电脑打字不就行了，还弄什么手机啊。。楼上说的金山打字通练字多好

[Eyon]

楼上两位都都跑题了。。。

[jdhao]

@Eyon 要打字就解决打字的问题，再搞个小程序，岂不是多此一举。当然你说你有兴趣实现这样的小程序，那肯定没问题啊。🐈

[zxCoder]

意思是不买电脑 先用手机和键盘练习打字？

[lyy16384]

这就是个 diff 功能啊
不过我觉得逐字对比就够用了，缺点是错位会全报错

[DL9412]

切分开来逐字比对？随手写了个，如果不多字漏字是好使的，如果多字漏字的话就不好说了。
猜个思路，不匹配时向后搜索匹配字符，到标点或句尾则放弃，下一个字符从上个匹配成功的位置开始搜索

```
<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]

要学电脑，为啥不买台电脑正儿八经的学，要用手机学拼音的话，直接全键盘输入法不就行了么。难道用键盘是带着出门用的。

[Eyon]

@DL9412 非常感谢。

一直没有想用逐字比对的方案，就觉得一篇文章下来全部拆分文字和标点，运算要求比较高了。当然我即使逐字比对也写不出来你这么漂亮的代码哈，压根儿没学过 js 。map 真是个好东西。