Question

我必须犯一个简单的错误或对功能的误解。如下所示，我正在尝试替换＆＃39; - ＆＃39;到＆＃39; /＆＃39;当用户输入＆＃39; - ＆＃39;。我试图在onkey上执行此操作，如果用户键入12-12-12。它将立即取代所有3个虚线：用户输入12-功能转为12 /立即。

我在这里做错了什么。

＆＃13;

function onkey(){
var user_input = document.getElementById('date_val').value;
// if(user_input.includes("-")){
// console.log("detects")
// user_input.replace(/-/g, "/");
// }
user_input.includes("-")? console.log("detects") && user_input.replace(/-/g, "/"):user_input;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>


</head>

<body>
date :<input type="text" id="date_val"  onkeyup="onkey()"> 
  

  <script src="./js/test.js"></script>
</body>

</html>

＆＃13;

Answer 1

String.replace返回 new 字符串。要更改值，您需要<section class="main"> <section class="section1"> <div class="inner-1"> </div> </section> <section class="section2"> <div class="inner-1"></div> <div class="inner-2"></div> </section> <section class="section3"> <div class="inner-1"></div> </section> </section>

Answer 2

来自MDN

replace（）方法返回一个新字符串，其中一个或所有匹配的模式由替换替换。模式可以是字符串或RegExp，替换可以是字符串或要为每个匹配调用的函数。

您必须重置元素的值：

＆＃13;

function onkey(){
  var user_input = document.getElementById('date_val').value;
  document.getElementById('date_val').value =  user_input.replace(/-/g, "/");
}

＆＃13;

date :<input type="text" id="date_val"  onkeyup="onkey()">

＆＃13;

Answer 3

您需要设置元素dateElement.value = user_input.replace(/-/gi, "/");

的值

此外，.replace不会修改字符串。它会返回一个新字符串，因此您的user_input不会更改。

我还将代码清理得更多，以便更具可读性和重构性。

您也不需要include检查，因为无论如何必须通过整个字符串。你不妨每次都更换，因为它可能非常接近相同的开销。

＆＃13;

function onkey(){
    var dateElement = document.getElementById('date_val');
    
    dateElement.value = dateElement.value.replace(/-/g, "/");
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
    date :<input type="text" id="date_val"  onkeyup="onkey()"> 
</body>

<script src="./js/test.js"></script>

</html>

＆＃13;

Answer 4

您需要从 replace 函数中分配结果。

采用 addEventListener 功能将事件绑定到您的元素。

＆＃13;

document.getElementById('date_val').addEventListener('keyup', function() {
  this.value = this.value.replace(/-/g, "/");
});

＆＃13;

Date :<input type="text" id="date_val">

＆＃13;

这是使用事件input来捕获该输入字段中的每个更改的替代方法。

通过这种方式，您将提供更好的用户体验，并且每次更改都会处理，例如拖放和文本粘贴。看看你在撰写替代品时的情况是不可见的。

＆＃13;

document.getElementById('date_val').addEventListener('input', function() {
  this.value = this.value.replace(/-/g, "/");
});

＆＃13;

Date :<input type="text" placeholder="Paste, Drag & Drop text" id="date_val">

＆＃13;

Answer 5

当您从输入中读取值时，您将获得该字符串的新实例，您需要将其分配回输入。

＆＃13;

function onkey() {
  const input = document.getElementById('date_val');
  const user_input = input.value;
  const newValue = user_input.includes("-") ? user_input.replace(/-/g, "/") : user_input;
  console.log(newValue);
  input.value = newValue;
}

＆＃13;

date :<input type="text" id="date_val" onkeyup="onkey()">

＆＃13;

Answer 6

document.getElementById（＆＃39; date_val＆＃39;）。value = user_input.replace（/ - / g，＆＃34; /＆＃34;）;

Javascript - 如果字符串包含和替换

6 个答案: