如何将GTM数据层变量的首字母转换为大写

先梳理你之前写法的核心问题：

• 第一个尝试里，element是DOM输入元素，不是字符串，直接调用charAt(0)完全错误；且str变量未定义，还试图给处理后的字符串绑定事件——事件监听只能绑定在DOM元素上，不能绑定在字符串上，逻辑完全混乱。
• 第二个尝试用Data Layer变量处理，但属于事后处理，此时原始值已经被推送到dataLayer，无法修改已经收集的原始数据，必须在数据推送前就处理输入值。

正确实现代码 #

在blur事件触发时，先处理输入框的值，再将格式化后的数据推送到dataLayer，同时可选择把格式化后的值写回输入框：

<script>
(function () {
  var element = document.querySelector('input[name="firstname"]');

  element.addEventListener("blur", function(e) {
    // 获取输入值并去除首尾空格
    var inputValue = e.target.value.trim();
    // 处理首字母大写，其余字符保持原样
    var formattedName = inputValue 
      ? inputValue.charAt(0).toUpperCase() + inputValue.slice(1)
      : "";
    
    // 可选：将格式化后的值写回输入框
    e.target.value = formattedName;

    // 推送处理后的数据到dataLayer
    dataLayer.push({
      'event': 'first_name', 
      'first_name': formattedName                   
    });
  }, true);
})();  
</script>

如果需要处理多单词首字母大写（比如"john doe"转"John Doe"），可以用正则优化处理逻辑：

<script>
(function () {
  var element = document.querySelector('input[name="firstname"]');

  element.addEventListener("blur", function(e) {
    var inputValue = e.target.value.trim();
    // 匹配每个单词的首字母并转为大写，其余字符保持原格式
    var formattedName = inputValue.replace(/\b\w/g, function(char) {
      return char.toUpperCase();
    });
    
    e.target.value = formattedName;

    dataLayer.push({
      'event': 'first_name', 
      'first_name': formattedName                   
    });
  }, true);
})();  
</script>

内容的提问来源于stack exchange，提问作者user25882303