"Literally" 将字符串插入 HTML 输入

Question

我想使用 jQuery 将字符串“按字面意思”插入到 HTML 输入字段中。问题在于该字符串包含转义字符和字符代码，并且在插入字符串时所有这些都需要仍然存在。我的问题似乎是 转义字符（感谢指出这一点的评论）。我不知道如何在不翻译转义字符和代码的情况下插入字符串。

文字字符串来自文件data.txt。澄清一下，这只是一个示例字符串，用于演示字符串中可以存在转义引号和字符代码等。

TEST\"/**\x3e

它们从文件加载（在 node.js 中）到字符串数组中。

包装器代码 (Node.js) 使用 Chrome 开发工具访问页面。在这里，为每个字符串准备了一个脚本，该脚本将在页面上注入和执行。因此 inputString 在被注入之前被插入到脚本中。

所以这是我的字符串转义问题。我有文字格式的字符串作为数据，我目前将它们作为动态生成的 JavaScript 代码注入，这是发生转义问题的地方。

注入代码

// this was (currently incorrectly) injected into the page before 
// from the array of input strings that was loaded from data
let insertString = "TEST\"/**\x3e";  // <- 

let form = $("form").first();
let inputs = form.find(":input").not(":input[type=submit]");
let input = inputs.first();
input.focus().val(insertString);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Exemplary form code on the page -->
<form action="post" method="post">
    <label for="name">Name: </label>
    <input id="name" type="text" name="input">
    <input type="submit" value="Submit">
</form>

我们得到了什么

我想要的

字符串没有按原样插入。例如字符代码 \x3e 被翻译成 >。转义的 \" 也被翻译成 "。它需要像从数据文件中复制和粘贴时一样插入。

关于潜在（手动）解决方案的想法

因此，一种可能的解决方案是重新处理 data.txt 文件并正确转义字符串。所以第一行可能是 TEST\\"/**\x3e，正如@Jamiec 和@Barmar 所建议的那样。

// injected before
let insertString = "TEST\\"/**\x3e";  // <- manually escaped

let form = $("form").first();
let inputs = form.find(":input").not(":input[type=submit]");
let input = inputs.first();
input.focus().val(insertString);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Exemplary form code on the page -->
<form action="post" method="post">
    <label for="name">Name: </label>
    <input id="name" type="text" name="input">
    <input type="submit" value="Submit">
</form>

然后字符串将按预期插入，但解决方案仍然不令人满意，因为对我来说最好不要触摸输入数据。最好让 data.txt 文件中的输入字符串与它们插入页面时的外观完全相同。这将需要加载输入数据和将每个字符串插入脚本（然后注入页面）之间的额外步骤。可能可以使用正则表达式替换来完成此预处理。

Answer 1

这与编码无关，也与输入字段无关 - 它只是字符串转义 - 因此可以使用控制台（或任何其他显示字符串的方式）进行演示。

为了在字符串中看到文字转义字符 \，您必须使用 \ 转义转义字符 - 见下文：

var text1 = "TEST\"/**\x3e";
console.log(text1)

var text2 = "TEST\\"/**\x3e";
console.log(text2)

如您所见，第一个输出正是您的问题，而第二个输出转义了转义字符，因此您在输出中得到了预期的结果。

Answer 2

您需要转义字符串中的所有反斜杠和引号。您可以使用正则表达式执行此操作。

function escape_string(string) {
  return string.replace(/[\"']/g, "\$&");
}

console.log('let str = "' + escape_string(prompt("Type a string")) + '";');

"Literally" 将字符串插入 HTML 输入

"Literally" insert string into HTML input

javascript

jquery

encoding

注入代码

我们得到了什么

我想要的

关于潜在（手动）解决方案的想法