在 JavaScript 对象中设置 trim() space 个字符的有效方法？

Question

这是一个精简的演示，具有复制我需要做的事情所需的非常基本的功能。

在我的 JavaScript 应用程序中，我在 Project Task Records.

上有一个 Click 事件

单击任务时，我使用 DOM 中与单击的任务记录相关的数据填充 JavaScript 对象。

我的问题是，当我从 DOM 打印出保存到我的对象的值时，我的字符串前后总是有大量的 space 个字符。

我有这个 Shim 可以利用更新的内置 JavaScript trim() 功能...

/* JavaScript trim() method is ES 5, just in case polyfill it (IE 8 and down):
 * example usage:
 *  var str = " a b    c d e   f g   ";
 *  var newStr = str.trim();
*/
if (!String.prototype.trim) {
  String.prototype.trim = function () {
    return this.replace(/^\s+|\s+$/g, '');
  };
}

下面我有一个针对这个问题的简单演示。

您将看到 JavaScript 对象存储在 taskDataObject

(NOTICE: I realize the actual selector code below is disgusting, that is next on my to-do list!)

这个 JSFiddle 页面包含展示我的演示的所有代码运行:
http://jsfiddle.net/jasondavis/2hkz0gp4/

当 .taskName 被点击时，它从 DOM 抓取数据并将其保存到 taskDataObject JavaScript 对象。

我正在寻找一种将此 str.trim() 代码应用于 taskDataObject 中所有属性的好方法，并希望我不必制作一堆临时变量。

演示代码

//Open Task Modal when a Task record is clicked in Task List
$('body').on('click', '.taskName', function() {


    // Set and Cache Task ID from clicked on Task Item
    var taskId = $(this).parent().parent().parent().dataAttr('task-id');

    var $taskEl = $(this);

    // Populate Task Data Object from DOM values
    taskDataObject = {
        //projectId: projectTaskModal.cache.projectId,
        taskId: taskId,
        taskName: $taskEl.text(),
        taskDescription: $taskEl.next('.description').text(),
        taskStatus: $taskEl.parent().parent('td').next().text(),
        taskPriority: $taskEl.parent().parent('td').next().next().text(),
        taskTags: $taskEl.parent().parent('td').next().next().next().text(),
        taskCreatedDate: $taskEl.parent().parent('td').next().next().next().next().text(),
        taskModifiedDate: $taskEl.parent().parent('td').next().next().next().next().next().text(),
        taskDueDate: $taskEl.parent().parent('td').next().next().next().next().next().next().text(),
    };

    console.log('taskDataObject', taskDataObject);


    // Just playing around, this applies the trim() however I had
    // to create a bunch of temp variables and I am not sure if 
    // this can be avoided or done differently?
    for (var key in taskDataObject) {

      if (taskDataObject.hasOwnProperty(key)) {

        alert(key + " -> " + taskDataObject[key]);

        //console.log(key + " -> " + taskDataObject[key]);

          console.log(taskDataObject[key]);

          var tmpVal1 = taskDataObject[key]
          var tmpVal2 = tmpVal1.trim();

          console.log(tmpVal2);

      }
    }

});

Answer 1

如果我正确理解你的问题，你只需要调用 text().trim() 而不是 text()。 text()returns一个String

如果您确实需要为每个属性值执行 trim，请执行：

for (var key in taskDataObject) {
    if(taskDataObject[key].trim)
       taskDataObject[key] = taskDataObject[key].trim(); 
}

这里是一个递归执行所有子属性的函数：

function trimObjectProperties(objectToTrim) {
    for (var key in objectToTrim) {
        if (objectToTrim[key].constructor && objectToTrim[key].constructor == Object)
            trimObjectProperties(objectToTrim[key]);
        else if (objectToTrim[key].trim)
            objectToTrim[key] = objectToTrim[key].trim();
    }
}

// Using this function, you should call it in that way:
trimObjectProperties(taskDataObject);

Answer 2

我认为你对你的问题有足够的评论和回答，但既然你说你正在学习 js，我想我会从另一个角度来讨论。

首先我想提醒你 jQuery 有一个 cross browser trim function，所以你不需要另一个垫片，因为你正在使用 jQuery。

jQuery 的另一个重要方面是它的扩展非常容易。所以你可以添加你自己的方法：

$.fn.extend({
  trimmedText: function() {
    return $.trim($(this).text());
  }
});

然后在您的代码中的任何地方使用它：

$(element).trimmedText();

在 JavaScript 对象中设置 trim() space 个字符的有效方法？

Efficient way to trim() space characters off all Properties in a JavaScript Object as they are being set?

javascript

jquery

trim