Replacing value from static string

Question

I have an string that I get from a td of my html table, it’s an input with no Id and in others td exists the same input with different values and purposes. My string is the following when has a value (I read the value from database)

<input value="10:00" />

And when there’s not a value the string is the following:

<input value="" />

What I want to do is to replace the value part of that string. At the moment I have the following code:

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

The problem is that I get the following string

value="10:0013:0014:00"

My code is adding my new values instead of replacing, what I’m doing wrong or how can I solve it.

Answer 1

You can use a regular expression instead

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)

Though this is not a good way, try to get the input element and change it's value instead of parsing text.

Answer 2

You should not alter the value of an HTML element by treating it as a string. Values of HTML elements have three interesting points.

• ref.setAttribute https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute

• Related https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute

• ref.value https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text#Value

• ref.defaultValue, scroll down: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

First the attribute is the "original value" of an input and if it is inside say for example a form and the form is reset, that is the value that gets placed into the input upon that reset. This can be set with .defaultValue The second is the "property" of the input - this property is what holds the current value of an input and does not match the attribute if for example it changes via the UI. Either can be changed but it would be best to alter those using the proper references to that input.

Note that your input has no type so it defaults to type="text", so we will assume that here.

Example:

First, you have to get a reference to the input element. Since you do not indicate exactly which, I will make an assumptions:

1. It is inside a table (as you indicated)
2. The input is inside a td element

3. I assume this is inside the table body tbody element and is in the third td.

   I use as an example a couple of tables to demonstrate the effects.

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>