[问题记录]前端 - textarea赋值前后不等问题

问题描述：项目中在表单提交时，进行表单数据比较，从而记录更改的数据。但发现在未修改textarea值的情况下，比较结果为不相等。本文模拟了问题产生的原因，以及提供了一种解决方法。

问题产生

页面加载完成时会获取到服务器端返回的数据originJson，解析JSON后得到originDatas，页面代码如下：

<!-- index.html -->
<textarea id="ta"></textarea>
<script>
    let originDatas, newDatas
	
	// 页面加载完毕后获取数据
    window.onload = () => {
        // 模拟从服务器获取数据
        getDatasFromServer()
    }

    // 模拟从服务器获取数据
    function getDatasFromServer() {
        setTimeout(() => {
            originJson = '{"value":"123\\r\\nabc\\r\\n"}'
            originDatas = JSON.parse(originJson)
            document.querySelector('#ta').value = originDatas.value
        }, 2000)
    }

</script>

当数据加载完成后，textarea中显示内容如下：

此时如果判断document.querySelector('#ta').value == originDatas.value，返回的结果为false

产生原因

经检查发现，document.querySelector('#ta').value.length为8，而originDatas.value.length为10，中间差的2个字符其实是\r。从服务器获取到的数据，换行是\r\n，但从文本框控件获取到的数据中，换行是\n。所以就引发了上述问题

解决方法

通过在比较之前对数据进行判断，将所有仅有\n的情况调整为\r\n解决此问题

if (ov.indexOf('\n') > -1 && ov.indexOf('\r\n') <= -1) {
    ov = ov.replace(/\n/g, '\r\n')
}