电话号码 I/O 格式答案

【问题标题】：Phone Number I/O formatting电话号码 I/O 格式
【发布时间】：2018-09-13 21:16:14
【问题描述】：

使用Regular Expression to reformat a US phone number in Javascript 答案中的建议代码，我尝试以典型的 HTML 表单形式输出来自用户输入的格式化电话号码。我知道用于格式化数字的函数工作正常，因为如果你将显式参数传递给函数，它就可以工作。所以我的想法是也许我的输入不是作为字符串输入的。但是，我尝试通过 String() 和 toString() 进行转换，但没有运气。我错过了什么吗？

要测试格式化函数，您所要做的就是创建以电话号码字符串作为值的变量，并将它们作为函数参数传递，以代替 officePhone 和 cellPhone。

注意：您必须点击表单下方的提交按钮才能运行脚本。

function populate(){	

	var officePhone = document.getElementsByName("input_office_phone")[0],
		cellPhone = document.getElementsByName("input_cell_phone")[0];
	
	
	function formatOfficePhone(officePhoneString) {
  		var cleaned = ('' + officePhoneString).replace(/\D/g, '')
  		var match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/)
  		if (match) {
    		return match[1] + '.' + match[2] + '.' + match[3]
  		}
  		return null
	}
	
	
	function formatCellPhone(cellPhoneString) {
  		var cleaned = ('' + cellPhoneString).replace(/\D/g, '')
  		var match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/)
  		if (match) {
    		return match[1] + '.' + match[2] + '.' + match[3]
  		}
  		return null
	}
	
	
	

	document.getElementById("office_phone").innerHTML = formatOfficePhone(officePhone);
	document.getElementById("cell_phone").innerHTML = formatCellPhone(cellPhone);

	
}

<!doctype html>
<html>
<body>
<strong>***INPUT***</strong><br>
<form>
  Office Phone:
  <input type="text" name="input_office_phone">
  <br>
  Cell Phone:
  <input type="text" name="input_cell_phone">
  <br>
  <br>
  <button type="button" onClick="populate()">Submit</button>
</form>
<br>
<strong>***OUTPUT***</strong><br>
<strong>office:</strong> <span id="office_phone"></span> <br>
<strong>cell:</strong> <span id="cell_phone"></span> 

</body>
</html>

【问题讨论】：

标签： javascript html

【解决方案1】：

之所以出现问题，是因为您获得了对输入元素 input_office_phone 和 input_cell_phone 的引用，而不是其中包含的值。要解决此问题，您需要获取元素的.value，如下例所示。

其他一些清理工作：

您有两个相同的函数来格式化两个电话号码，而不是重复使用相同的函数。我已经在下面清理了。
您在populate() 函数中声明了格式函数。理想情况下，您不希望将函数嵌套在其他函数中，因此我在下面将它们分开。

希望这会有所帮助！

function formatPhone(number) {
  var cleaned = ('' + number).replace(/\D/g, '')
  var match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/)
  if (match) {
    return match[1] + '.' + match[2] + '.' + match[3]
  }
  return null
}

function populate() {
  var officePhone = document.getElementsByName("input_office_phone")[0].value,
    cellPhone = document.getElementsByName("input_cell_phone")[0].value;

  document.getElementById("office_phone").innerHTML = formatPhone(officePhone);
  document.getElementById("cell_phone").innerHTML = formatPhone(cellPhone);
}

<strong>***INPUT***</strong><br>
<form>
  Office Phone:
  <input type="text" name="input_office_phone">
  <br> Cell Phone:
  <input type="text" name="input_cell_phone">
  <br>
  <br>
  <button type="button" onClick="populate()">Submit</button>
</form>
<br>
<strong>***OUTPUT***</strong><br>
<strong>office:</strong> <span id="office_phone"></span> <br>
<strong>cell:</strong> <span id="cell_phone"></span>

【讨论】：

太棒了！这正是问题所在。感谢您的帮助和一些清理技巧。我将函数分成两部分，因为我正在测试一些格式变化......忘记继续将它们重新组合在一起。至于嵌套函数，我更习惯于其他一些可以接受嵌套函数并且是规范的语言，所以我总是忘记它在 JS 中并不可取。再次感谢，伙计！