javascript - 为什么像 `\n` 这样的转义序列不能在 <input> 标签的 value= 属性中解释？

Question

有人能解释一下为什么以下两部分代码有不同的结果吗？

这里的结果是:

34rtyrtyrrtyr87 \n oiupoiuapgdaiuga

var str = document.getElementById("custId").value

if (/\r|\n/.exec(str)) {
  console.log(str)
} else {
  console.log("not foundx")
}

<input type="hidden" id="custId" name="custId" value="34rtyrtyrrtyr87 \n 
oiupoiuapgdaiuga" autofocus> <br>

这里的结果是:

34rtyrtyrrtyr87
 oiupoiuapgdaiuga

var str = "34rtyrtyrrtyr87 \n oiupoiuapgdaiuga"

if (/\r|\n/.exec(str)) {
  console.log(str)
} else {
  console.log("not foundx")
}

<input type="hidden" id="custId" name="custId" value="34rtyrtyrrtyr87 \n oiupoiuapgdaiuga" autofocus><br>

尝试读取类型，但都是字符串。 需要哪种类型的转换才能使一个行为与另一个行为相似，反之亦然？

Answer 1

在 JavaScript 字符串中，\n 是 escape sequence对于换行符。在 HTML 带引号的属性值中，\n 只是字符 \ 和 n。

如果您想在 HTML 中插入换行符，您可以这样做，有时会牺牲良好的格式:

<input type="hidden" … value="34rtyrtyrrtyr87
oiupoiuapgdaiuga" …>

或者使用 character reference :

<input type="hidden" … value="34rtyrtyrrtyr87&#x0a;oiupoiuapgdaiuga" …>

for (const input of document.getElementsByTagName('input')) {
    console.log(JSON.stringify(input.value));
}

<input type="hidden" value="a\nb">
<input type="hidden" value="a
b">
<input type="hidden" value="a&#x0a;b">