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

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

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