Question

我有一个从html表的td中获取的字符串，它是一个没有ID的输入，在其他情况下，td存在具有不同值和用途的相同输入。有值时我的字符串如下（我从数据库中读取了值）

<input value="10:00" />

当没有值时，字符串如下：

<input value="" />

我想要做的是替换该字符串的值部分。目前，我有以下代码：

myString = myString.replace('value="', 'value="' + newValue );

问题是我得到了以下字符串

value="10:0013:0014:00"

我的代码添加的是新值而不是替换的值，我做错了或如何解决。

Answer 1

您可以改用正则表达式

var myString = '< input value="10:00" />';

var newValue = "11:00";

myString = myString.replace(/value=".*?"/, 'value="' + newValue + '"');
console.log(myString)

myString = '< input value="" />';
myString = myString.replace(/value=".*?"/, 'value="' + newValue + '"');
console.log(myString)

尽管这不是一个好方法，但请尝试获取输入元素并更改其值，而不是解析文本。

Answer 2

您不应通过将HTML元素视为字符串来更改其值。 HTML元素的值具有三个有趣的方面。

ref.setAttribute https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
相关https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute
参考值https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text#Value
ref.defaultValue，向下滚动：https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

首先，属性是输入的“原始值”，如果属性在内部，例如说是一个表单，并且该表单被重置，那么该属性就是在重置时放入输入中的值。可以使用.defaultValue进行设置。第二个是输入的“属性”-此属性保存输入的当前值，并且例如通过UI更改时，该属性不匹配该属性。都可以更改，但是最好使用对该输入的正确引用来更改这些内容。

请注意，您的input没有类型，因此默认为type="text"，因此我们在这里假设。

示例：

首先，您必须获得对输入元素的引用。由于您没有确切指出，我将做一个假设：

它在表中（如您所述）
输入内容位于td元素内
我假设这是在表主体tbody元素内部，并且在第三个td中。

我以几个表格为例来说明效果。

let showRef = document.getElementById("showme1");
let showRef2 = document.getElementById("showme2");

let myNewValue = "11:00";
let tableRef = document.getElementById("first-table");
let tbodyRef = tableRef.getElementsByTagName('tbody')[0];
let trRef = tableRef.getElementsByTagName('tr')[2];
let tdRef = tableRef.getElementsByTagName('td')[2];
let inputRef = tableRef.getElementsByTagName('input')[0];
// set value property which is what gets saved in forms
inputRef.value = myNewValue;
// set the attribute (default value) to use on form resets
inputRef.setAttribute('value', myNewValue);

showRef.innerHTML = 'Attr:'+inputRef.getAttribute("value") + ' Value:'+inputRef.value+ ' Default:' +inputRef.defaultValue ;

let myNewValue2 = "12:02";
let tableRef2 = document.getElementById("second-table");
let tbodyRef2 = tableRef2.getElementsByTagName('tbody')[0];
let trRef2 = tableRef2.getElementsByTagName('tr')[2];
let tdRef2 = tableRef2.getElementsByTagName('td')[2];
let inputRef2 = tableRef2.getElementsByTagName('input')[0];
// set value property which is what gets saved in forms
inputRef2.value = myNewValue2;
// set the attribute (default value) to use on form resets
inputRef2.setAttribute('value', myNewValue2);
inputRef2.defaultValue = '12:03';

showRef2.innerHTML = 'Attr:'+inputRef2.getAttribute("value") + ' Value:'+inputRef2.value+ ' Default:' +inputRef2.defaultValue ;

<table id="first-table">
  <tbody>
    <tr>
      <td><input value="frosty1" /></td>
      <td><input value="notme" /></td>
      <td><input value="14:00" /></td>
      <td><input value="later" /></td>
    </tr>
    <tr>
      <td><input value="frosty2" /></td>
      <td><input value="notme" /></td>
      <td><input value="16:00" /></td>
      <td><input value="later" /></td>
    </tr>
    <tr>
      <td><input value="frosty3" /></td>
      <td><input value="notme" /></td>
      <td><input value="10:00" /></td>
      <td><input value="later3" /></td>
    </tr>
  </tbody>
</table>
<table id="second-table">
  <tbody>
    <tr>
      <td><input value="frosty1" /></td>
      <td><input value="notme" /></td>
      <td><input value="14:00" /></td>
      <td><input value="later" /></td>
    </tr>
    <tr>
      <td><input value="frosty2" /></td>
      <td><input value="notme" /></td>
      <td><input value="16:00" /></td>
      <td><input value="later" /></td>
    </tr>
    <tr>
      <td><input value="frosty3" /></td>
      <td><input value="notme" /></td>
      <td><input value="10:02" /></td>
      <td><input value="later3" /></td>
    </tr>
  </tbody>
</table>
<div id="showme1"></div>
<div id="showme2"></div>

从静态字符串替换值

2 个答案: