Question

我有一个带有选项标签的select标签，其值为＆＃34; \ n＆＃34;。当选择该选项并使用jQuery获取值时，JavaScript似乎将其视为字符串文字并且不将其解释为换行符。

我尝试使用jQuery htmlEncoding技术，jQuery htmlDecoding技术转义转义，unesacping，转义然后转义，甚至尝试连接空字符串。我把头发拉了出来。这应该很简单。

至少有5种解决方法几乎立即出现在我的脑海中，各种优雅程度，但此时，我对这种行为存在的原因更感兴趣。我有什么简单的遗失吗？我真正的问题是＆＃34;为什么JavaScript在一个上下文中处理一串\ n单向字符串，但在另一个上下文中处理不同的字符串＃34;而不是＆＃34;我如何让它工作＆＃34;。

这是代码

HTML

<select id="delimiter">
  <option value="\n">New Line</option> <!--This should produce a linefeed-->
  <option value=",">, (Comma)</option>
  <option value=";">; (Semicolon)</option>
  <option value="\t">Tab</option>
</select>
<button  onclick="doit()">
  Check It
</button>

的JavaScript

function doit(){
  var delimiter = $("#delimiter").val();

  console.debug("\n"); //produces an actual linefeed character
  console.debug(delimiter); //this produces the string "\n"
}

我在这里有一个codepen： https://codepen.io/codysechelski/pen/MoJKMB?editors=1111

Answer 1

替换＆＃34; \ n＆＃34;使用新行代码在您的值中："" 在HTML标记属性中，您必须使用HTML character entity作为特殊字符。

Answer 2

“为什么JavaScript在一个上下文中处理一串\ n单向，但是不同的另一个“

首先，您应该了解字符串文字不是内存中的实际字符串，而是用于创建字符串的js语法的一部分。因此，以“\”字符开头的转义序列向js引擎发出信号，以不同的方式处理下一个字符。

HTML没有这种特殊语法。所以“\”只是“\”而“\ n”是“\ n”。当此字符串通过DOM API（不是js语法的一部分）跨越html-js边界时，它仍然是“相同的”双字母字符串。

顺便说一下，有不同的方法在js中编码新行，在内存中生成相同的字符串

const withEscSequence = '\n'

// es2015
const usingStringTemplate = `
`
// directly from char code
const fromCharCode = String.fromCharCode(10)

// using unicode escape sequence
const unicodeEscSequence = '\u000A'

// using hex escape sequence
const hexEscSequence = '\x0A'


console.log(withEscSequence === usingStringTemplate, withEscSequence === fromCharCode, withEscSequence === unicodeEscSequence, withEscSequence ===  hexEscSequence)

Answer 3

为什么JavaScript在一个上下文中单行处理\n字符串，但在另一个上下文中则不同？

因为它不是JavaScript，而不是字符串文字。 <option value="\n">是纯HTML，反斜杠不是HTML中的转义字符。您可以使用文字换行符或character entity代替。

我试过逃避......

但显然不是正确的。它总是取决于逃避使用的上下文，有时您甚至需要链接它们。一些合适的解决方案：

HTML源代码中的文字字符：

<option value="
">New Line</option>
<option value=",">Comma</option>
<option value=" ">Tab</option>

selectEl.value

HTML源代码中的字符实体引用，以避免奇怪的格式化：

<option value="&#x000A;">New Line</option> <!-- or &#10; -->
<option value=",">Comma</option>
<option value="&#x0009;">Tab</option> <!-- or &#9; -->

selectEl.value

HTML源代码中的JSON文字以避免知道字符代码：

<option value="&quot;\n&quot;">New Line</option>
<option value="&quot;,&quot;">Comma</option>
<option value="&quot;\t&quot;">Tab</option>

JSON.parse(selectEl.value)

HTML源代码中的JSON字符串内容：

<option value="\n">New Line</option>
<option value=",">Comma</option>
<option value="\t">Tab</option>

JSON.parse('"'+selectEl.value+'"')

＆＃34; \ n＆＃34;被视为JavaScript

HTML

的JavaScript

3 个答案: