Firestore读取Cloud Vision生成的besede字段空格丢失如何解决

问题根源 #

Cloud Vision识别多行文本时，行与行之间默认用换行符\n拼接而非空格，Firestore控制台的预览视图会自动将换行符转换为空格展示，编辑视图和SDK读取到的是原始存储内容，因此会出现预览和实际值不一致的情况。

解决方案 #

分两种场景处理：

• 场景1：还未将Cloud Vision识别结果写入Firestore
  处理OCR结果时遍历识别的行数据，每一行内容拼接时主动加空格，而非直接使用默认返回的全文字符串，从源头保证存储的内容就带正确空格。
• 场景2：数据已经写入Firestore无法修改源数据
  直接在读取数据时将原始字符串中的换行符替换为空格即可，修改后的代码如下：

fs.collection('besedila').where(ft.FieldPath.documentId(), '==', props.location.state.docID).onSnapshot((doc)=>{
  doc.forEach(snap=>{
    const rawBesede = snap.data()['besede'][0]
    // 替换所有换行符为空格，匹配控制台展示效果
    const formatBesede = rawBesede.replace(/\n+/g, ' ')
    console.log(formatBesede)
    setBesede(formatBesede)
  })
})

如果识别结果中还有其他空白符号需要转换，可以扩展正则匹配规则，比如将制表符也一起替换：rawBesede.replace(/[\n\t]+/g, ' ')

内容的提问来源于stack exchange，提问作者Nina