将转义序列转换为 HTML答案

【问题标题】：Converting escape sequences to HTML将转义序列转换为 HTML
【发布时间】：2020-07-25 11:38:49
【问题描述】：

Javascript 的字符串有一些转义序列，包括\b, \f, \n, \r, \t, \v, \0, \', \", \\。是否有任何内置函数可以将字符串中的所有出现转换为 HTML 等价物（\n 到 <br>、\t 到 &nbsp 等）所以我可以像这样使用它$('body').append('<div class="testing">' + escaped_string + '</div>'); 和显示正确吗？

我到处搜索，人们似乎只关心\n 和\t，因此所有答案都建议为此使用替换，但我想避免手动转换每个答案。

谢谢

编辑：我正在从输入中读取字符串并且不记得转义序列将被视为文字，这就是为什么它在渲染时没有被正确表示。我设法在读取字符串上使用JSON.parse 并在输出CSS 中使用white-space: pre-wrap; 来逃避它。

【问题讨论】：

CSS: white-space: pre-wrap;.
@NiettheDarkAbsol 无法达到预期目的，转义序列仍被解释为文字
转义序列仍然被解释为文字你是什么意思？你看到输出中显示了 slash t slash n 吗？
@james 有趣的一个。我的意思是我看到了example \n example2
在这种情况下，您的字符串中有文字字符而不是转义序列。

标签： javascript html jquery dom

【解决方案1】：

是否有任何内置函数可以将字符串中所有出现的这些内容转换为 HTML 等价物...？

没有。这就是为什么您找到的答案说使用replace。（那个，不同的人在替换换行符时想做不同的事情等）

【讨论】：

【解决方案2】：

没有内置函数，但您可以自己编写一个函数，其中replace 为每个符号，如string.replace("\n", \"<br") 等等。如果您需要帮助，请给我发消息。

【讨论】：

【解决方案3】：

没有内置函数，但你总是可以创建一个

// Set string
const str = 'Hello\nthere! I\twant to be "HTML" friendly & pretty!';

// Set resulting html var
let html = '';

// Convert with your own rules
for(let i = 0; i < str.length; i++){
  switch (str[i]){
      case '\n':
            html+="<br>";           
            break;
                
        case ' ':
            if(str[i-1] != ' ' && str[i-1] != '\t') html+=" ";                                                  
            break;
                    
        case '\t':
            html+="&nbsp";
            break;
                
        case '&':
            html+="&amp;";
            break;
                
        case '"':
            html+="&quot;";
            break;
                
        case '>':
            html+="&gt;";
            break;
                
        case '<':
            html+="&lt;";
            break;              
                
        default:
            html+=str[i];       
    }           
}

// Log
console.log(html);

【讨论】：

【解决方案4】：

我已经找到了问题以及如何解决它！（谢谢大家的回答）

我没有意识到我正在从输入中读取字符串，因此转义序列被解释为文字！

我设法通过使用 JSON.parse() 来解决这个问题，将文字转换为转义序列，现在它可以使用输出的 CSS 的 white-space: pre-wrap; 准确表示！

【讨论】：