javascript - 文件中的行号与 HTML 表单的文本区域字段中的行号之间的对应关系

Question

我有一个由文本区域组成的表单，由于 Javascript 的作用，带有行号。我使用此表单来验证 JSON，就像 jsonlint.org 所做的那样。用户输入一些 JSON，按验证，然后返回答案。我自己没有解析文件，我使用 python 命令:

python -m json.tool input.json

如您所见，此命令需要一个文件。所以我正在做的事情如下:

• 将表单数据写入文件
• 运行此命令并获取输出
• 如果没有错误，输出到屏幕“Valid JSON”，如 jsonlint.org否则显示程序给出的错误消息:“Error .... line x column y (char z)”

Python 程序给出的行号对应于文件中的行号，而不是文本区域中的行号……这使得我的 Javascript 行号毫无用处。找到 2 之间的对应关系给我带来了困难，因为它取决于我的文本区域的宽度以及我在其中使用的字体，并理解文件中的行号是如何设置的(我不太明白)

我怎样才能找到两者之间的通信？

谢谢

刚刚意识到:我的文本区域看起来与您在 SOF 上提问时输入的文本区域完全相同:D

----- 编辑作为对 Ben 的回应 -----很有意思。我使用文本区域的一个名为“wrap”的选项实现了我要求的功能。我设置为“软”:

<form method='post' action='/exec' id="jsonform" >
       <textarea wrap="hard" name="json" id="json_input" rows="20" cols="150" placeholder="Enter JSON to validate.">{{ resp | safe }}</textarea>
       <div align="center">
       <input type='submit' value='Validate' id="button" >
       </div>
    </form>

但是，这会使有效的 JSON 无效。因为 Python 模块期望在换行符之前有引号...因此，我需要向验证器提供来自 textarea="soft"表单的数据，并显示来自 textarea="hard"表单的数据。但我有一种形式。我还尝试了您给我的帖子中给出的代码，但由于某种原因它不起作用。而且我不知道 Javascript(需要更改它。)所以我无法调试或调整代码...... hell LP

Answer 1

与其在事后尝试导出线条，不如在发送要测试的数据之前添加标记。 finding "line-breaks" in textarea that is word-wrapping ARABIC text看起来它有一个非常强大的技术来强制所有换行处换行。如果文本区域使用的换行符和文件使用的留置符不同，您仍然会发现在传输过程中从一种换行符转换为另一种相对容易。如果您不想扰乱它，因为您希望用户能够编辑它，而无需额外的换行符(如果/当它返回无效时)，那么我建议将文本区域克隆到“display:none”内的空间"div 或等效设置。根据需要对克隆进行破坏和测试，然后将反馈放在未触及的可见原件上。如果文件具有自动换行宽度，那么您必须确保文本区域的自动换行宽度较短，但这应该不难，如果这是一个开始的问题，我会有点惊讶.

编辑:如果 python 模块必须在换行符之前有引号，那么无论如何你都会遇到一些麻烦 - 任何人都可以随时通过按 Enter 键手动添加硬换行符。我的建议是在 Json 和文件之间有某种处理器功能，并在换行符之前添加适当的引号 - 尽管我可能在这里有点误解。

如果您想要使用表单的多个副本，那是完全可行的。你确实需要使用 jQuery，但 jQuery 无论如何还是值得学习的。 (在你弄清楚之前，这有点令人沮丧，然后在你弄清楚之后，这是 javascript 发生过的最好的事情，你将永远不想没有它。)包含 jQuery 的最新副本(它是一个 javascript 插件) )。 clone()函数将允许您在克隆时创建现有文本区域(或表单，或任何其他 DOM 对象)的精确副本(即，它将把所有文本写入其中)。 insertBefore()和/或insertAfter()函数可以让你把它放在你想要的页面中的任何地方 - 也许在 <div style="display:none"></div> 内这样你就可以随心所欲地使用它，而无需做任何屏幕上可见的事情。