有没有办法忽略 <option> 标记值内的空格？ [复制]答案

【问题标题】：Is there a way to ignore whitespace inside of the value of a <option> tag? [duplicate]有没有办法忽略 <option> 标记值内的空格？ [复制]
【发布时间】：2019-11-20 12:53:00
【问题描述】：

我正在创建一个项目，其中有一个 Django 服务器将 JSON 数据发送到一个运行 Vue.js 的模板。 JSON 数据正在发送带有尾随空格的值，这会导致问题。如果可能，我想在 HTML 页面上删除它们。

我尝试在 JSON 数据上使用 Javascript.trim()，但似乎没有任何效果。我也无法去除整个 JSON 文件的空格，因为某些值需要在其中包含空格。

我正在尝试从 {"keyword" : "value"} 集中删除空格。 “价值”部分有时会包含“价值”或“价值”。

This won't work
<option value="And">And</option>

But this will
<option value="And ">And</option>

JSON 对象包含

"keyword": "And "

代替

"keyword": "And"

我希望标签能够工作，无论数据中值周围的空格如何。

编辑：我不能使用 Javascript 的 trim() 函数，因为 JSON 数据中出现了几十个问题。循环遍历数据并修剪每个单独的字符串会显着增加页面的加载时间。

编辑2：

<b-form-select for="action-text" v-model="step.keyword" class="mx-3">
    <option value="Given ">Given</option>
    <option value="When ">When</option>
    <option value="Then ">Then</option>
    <option value="And ">And</option>
    <option value="But ">But</option>
</b-form-select>

我会在哪里根据需要进行修剪？

【问题讨论】：

.trim() 绝对可以解决问题，请显示minimal reproducible example。
也可能与 Python 相关：stackoverflow.com/questions/761804/…
为什么要解决这个客户端问题？从源头修复
@charlietfl 不幸的是，我正在使用一个非常小众的库来收集我正在使用的数据，并且该库创建了我要发送到模板的 JSON 对象。我尝试查看它的源代码，但我怀疑我是否能够在那里解决问题。
好的..但是根据您的编辑...您可以根据需要进行修剪。不确定您真正期望什么样的答案。听起来像是库中的错误，而不是解决错误，而是在前端抛出创可贴

标签： javascript html json vue.js

【解决方案1】：

您可以使用以下函数修剪键和值：

function trimObj(obj) {
  if (!Array.isArray(obj) && typeof obj != 'object') return obj;
  return Object.keys(obj).reduce(function(acc, key) {
    acc[key.trim()] = typeof obj[key] == 'string'? obj[key].trim() : trimObj(obj[key]);
    return acc;
  }, Array.isArray(obj)? []:{});
}

var a = '{ "name":"John ", "age":30, "city":" New York"}';
console.log(trimObj(JSON.parse(a)));

或者，您可以对其进行字符串化、字符串替换和重新解析

JSON.parse(JSON.stringify(badJson).replace(/"\s+|\s+"/g,'"'))

Answered here

【讨论】：