呈现JSX中的选项卡和其他特殊字符

Question

我需要呈现一个字符串，就像我从服务器获得它一样，例如，如果我得到一个包含"\t〃；我需要将其呈现为"；\t〃；而不是作为空间/s。在组件的状态下，我看到字符串出现时带有特殊字符，但呈现时没有：

状态：'"id"t"namen key"'

呈现的内容："id" "name key"

我该如何防止这种情况发生？

Answer 1

由于JS和DOM默认解析n等特殊字符，因此可以定义要防止其以默认方式表现的特殊字符，并将其替换为原始加反斜杠：

看看这个可运行的片段：

let textWithSpecialChars = `"id"t"namen keyf r b"`;
const specialChars = ['\b', '\r', '\f', '\n', '\t'];
let modifiedTextWithSpecialChars = JSON.stringify(textWithSpecialChars);
specialChars.forEach((char) => {
modifiedTextWithSpecialChars = modifiedTextWithSpecialChars.replace(char, '\' + char);
});
console.log(modifiedTextWithSpecialChars); 
// ""id"\t"name\n key\f \r \b""
console.log(JSON.parse(modifiedTextWithSpecialChars));
// "id"t"namen keyf r b"
console.log(textWithSpecialChars);
// "id" "name
// key 
// "

document.body.innerHTML = JSON.parse(modifiedTextWithSpecialChars)

分析

1. 您收集该数组中的所有特殊字符并对其进行转义
2. 字符串化您的字符串，这样您就可以在JS中使用该字符串，而无需JS解析特殊字符
3. 取此字符串并循环遍历您在上面添加的所有特殊字符
4. 对于每个特殊字符，取原始字符串，并将特殊字符(如n(替换为\n。将该值返回到修改字符串，然后继续，直到所有特殊字符都被替换为止。这将是'"id"\t"name\n key\f \r \b"'
5. 将字符串解析回来，JS不会将特殊字符解析为特殊字符，而是将它们解析为纯字符串