像在 JSX 中一样渲染标签和其他特殊字符

Question

我需要完全按照从服务器获取的字符串来呈现它，例如，如果我得到一个包含“\t”的字符串，我需要将它呈现为“\t”而不是空格/s。 在组件的状态下，我看到字符串出现了特殊字符但没有呈现：

状态： '\"id\"\t\"name\n key\"'

渲染的内容： "id" "name key"

我怎样才能防止这种情况发生？

Answer 1

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

看看这个可运行的sn-p：

let textWithSpecialChars = `"id"\t"name\n key\f \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"name\n key\f \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 不会将特殊字符解析为特殊字符，而是将它们是纯字符串。