Rename text (change space per point) in input with javascript

Question

look this: i chargue this file.. and it shows like this

and i need to rename it like that:

I would like to automatically rename spaces by periods, and delete other characters like [,()!;'\[\]}{=]

I honestly do not have a script, because I do not know how to do it, I had one but it was a disaster haha; I broke all the html :/ I just need to modify the text in input. script in javascript or jquery I clarify that the texts are always different

I leave you a jsfiddle https://jsfiddle.net/qwertyip/j4dcsL7n/12/

I hope you can help me, regards

Answer 1

I am unsure when you want to modify the value, but this will update the value for you:

// Get a reference to the element in question
let renameThese = Array.from(document.querySelectorAll("input[name^='rename']"));

// Loop through all the elements to be renamed
renameThese.map(el =>
  // Replace the spaces with periods and remove all the other characters.
  el.value = el.value.replace(/\ /g, '.').replace(/[\[\]\{\}\(\)\;\!\;\'\=]/g, ''));

<table id="list-files" class="table table-striped table-condensed table-hover">
  <thead>
    <tr>
      <th width="35">
        <div class="checkbox-custom checkbox-default">
          <input type="checkbox" id="select-all-files" checked="">
          <label for="select-all-files"></label>
        </div>
      </th>
      <th>File</th>
      <th>Size</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="checkbox-custom checkbox-default"><input name="files[]" checked="" type="checkbox" value="2"><label></label></div>
      </td>
      <td class="pt-none pb-none">
        <div>
          <div class="pull-left mt-xs mr-xs">PDF Shaper Professional v8.9 (2-click run) / </div>
          <div style="overflow:hidden"><input class="form-control input-sm m-none" style="background-color: transparent" type="text" name="rename[2]" value="PDF S[]{}haper Professional v8.9 (2-click run).exe"></div>
        </div>
      </td>
      <td>17.2 MiB</td>
    </tr>
    <tr>
      <td>
        <div class="checkbox-custom checkbox-default"><input name="files[]" checked="" type="checkbox" value="2"><label></label></div>
      </td>
      <td class="pt-none pb-none">
        <div>
          <div class="pull-left mt-xs mr-xs">PDF Shaper Professional v8.9 (2-click run) / </div>
          <div style="overflow:hidden"><input class="form-control input-sm m-none" style="background-color: transparent" type="text" name="rename[2]" value="PDF S[]{}haper Professional v8.9 (2-click run).exe"></div>
        </div>
      </td>
      <td>17.2 MiB</td>
    </tr>
  </tbody>
</table>

Note: If you leave a comment when you would like to update the value, leave a comment and will update, else, here you go.