首先使用document将值存储在变量中。getElementById（）
就像这样

var string = document.getElementById("*replace this with id if input field")

字符串
现在只需要在这个字符串上应用子字符串函数，并将它们保存到变量中，就像这样...

var first =  string.substring(1, 0); \\ this will give you the first letter
var second =  string.substring(1, 7); \\ it will give you next 6 letters
var third =  string.substring(7, 10);  \\ it will give you next 3 letters
var fourth =  string.substring(10, 14); \\ it will give you next 4 letter

型
现在只要加上条件，让你像这样

let final_string = ""
 if(first == "f"){
  final_string = final_string + "FRESH-"
 }

 else if(first == "C"){
  final_string = final_string + "C&T-"
 }

 else if(first == "P"){
  final_string = final_string + "PDMG-"
 }

 else{
  final_string = final_string + "DMG-"
 }

型
现在同样应用if-else阶梯并相应地将部分添加到final_string。

假设输入总是按照你给定的顺序和长度，并且转换总是你给定的值之一，你可以创建一个定界点为substring输入的数组，然后创建另一个具有匹配索引的数组作为查找字典。大概是这样的：

let delimits = [0,1,7,10],
    lookup = [
      { C: 'C&T', D: 'DMG', F: 'FRESH', P: 'PDMG' },
      { PPUTHP:'PPC', PPUSLH: 'SUPER', PPUFLH: 'WP', '43UTHP': 'OPC43', '53UTHP': 'OPC53' },
      { '110': 'ACS', '111': 'VCS', '112': 'PGU', '113': 'DGU', '114': 'AGU' },
      { '0000': 'MRP', '5000': 'NON MRP' }
    ];

document.querySelector('button').addEventListener('click', function() {
  document.querySelector('input.output').value = delimits.map((delimit, index) =>
      lookup[index][document.querySelector('input.input')
        .value.substring(delimit, delimits[index + 1])]
  ).join('-');
});

document.querySelector('input.input').value = 'FPPUTHP1100000';

个字符
如果你想让输出的顺序与输入的顺序不同，你可以：

orig = output.split('-');
reorder = [orig[2], orig[1], orig[3], orig[0]].join('-');

型
根据OP要求编辑。从经验中得出的一些其他注意事项：

• 如果您只使用自己的代码，DOM遍历是很好的（尽管当您的项目变得更大时，即使这样也会引起麻烦），但如果您试图遍历其他人的代码，这真的是一个坏主意。他们可以在任何时候改变布局并破坏您的代码。相反，您应该使用id或class或attribute或它们的某种组合来创建显式标识符。
• 现在一切都是异步的。当在其他代码（tampermonkey，greasemonkey等）上编写代码时，可能在您试图访问的元素加载之前，您的脚本就已经执行了，这使得您的脚本看起来似乎没有做任何事情。我相信还有更聪明的方法，但我总是通过将脚本 Package 在一个间隔中并在尝试更改之前检查元素是否存在/具有我想要更改的属性来解决这个问题。

let loading = setInterval(function() {
  if ($('.thing-required-for-your-script-to-work').length) {
    clearInterval(loading);
    //your script here
  }
}, 1000);

型

let $input = $('bdi:contains("Material Code")').closest('div').next().find('input'),
    $output = $('span:contains("Despatch Detail")').next(),
    delimits = [0,1,7,10],
    lookup = [
      { C: 'C&T', D: 'DMG', F: 'FRESH', P: 'PDMG' },
      { PPUTHP:'PPC', PPUSLH: 'SUPER', PPUFLH: 'WP', '43UTHP': 'OPC43', '53UTHP': 'OPC53' },
      { '110': 'ACS', '111': 'VCS', '112': 'PGU', '113': 'DGU', '114': 'AGU' },
      { '0000': 'MRP', '5000': 'NON MRP' }
    ];

$input.val('FPPUTHP1100000'); //simulating whatever the page loaded

$output.text(delimits.map((delimit, index) =>
  lookup[index][$input.val().substring(delimit, delimits[index + 1])]).join('-'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- just guessing at the markup based on your code -->
<div><bdi>Material Code</bdi></div>
<div><input></div>
<div><span>Despatch Detail</span><p></p></div>

的字符串
编辑2，输出顺序：

let $input = $('bdi:contains("Material Code")').closest('div').next().find('input'),
    $output = $('span:contains("Despatch Detail")').next(),
    delimits = [0,1,7,10],
    lookup = [
      { C: 'C&T', D: 'DMG', F: 'FRESH', P: 'PDMG' },
      { PPUTHP:'PPC', PPUSLH: 'SUPER', PPUFLH: 'WP', '43UTHP': 'OPC43', '53UTHP': 'OPC53' },
      { '110': 'ACS', '111': 'VCS', '112': 'PGU', '113': 'DGU', '114': 'AGU' },
      { '0000': 'MRP', '5000': 'NON MRP' }
    ],
    output_order = [3,2,1,0]; //based on the lookup index

$input.val('FPPUTHP1100000'); //simulating whatever the page loaded

let output = delimits.map((delimit, index) =>
  lookup[index][$input.val().substring(delimit, delimits[index + 1])]);
  
$output.text(output_order.map((index) => output[index]).join('-'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- just guessing at the markup based on your code -->
<div><bdi>Material Code</bdi></div>
<div><input></div>
<div><span>Despatch Detail</span><p></p></div>