swap text/add specific word html/php code - php

Question

I am looking to translate some very specific encoding to something that will improve its readability.
Example input
OUT PUT:
Copper Box v3;
S/N:25304;FW:1.07.12;
;a-b;a-GND;b-GND;
U=;0.74 V;3.23 V;0.48 V;
U~;0.03 V;0.02 V;0.02 V;
C;232.5 nF;11.87 nF;30.73 nF;
ISO;2.28 MΩ;237 kΩ;2.19 MΩ;
R;- -;
ΔC;- -;
Length; - m;
Desired output
OUT PUT:
U=;
A-B 0.74 V
A-G 3.23 V
B-G 0.48 V
U~;
A-B 0.03 V
A-G 0.02 V
B-G 0.02 V
C;
A-B 232.5 nF
A-G 11.87 nF
B-G 30.73 nF
ISO;
A-B 20.28 MΩ
A-G 237,1 kΩ
B-G 20.19 MΩ
Background
In my spare time I work with printed circuit boards as a hobby and try to fix broken machines for people, like coffee machines.
I have a new device with which I can measure things in an easy way.
But the device only gives a QR code that I can scan. It looks like the "example input" provided above.
I want to make it easier to read such text.
Manually changing it is a possibility; but it takes a lot of time. Sometimes I have 5 such measurements per hour.
Question
I would love to make a textarea box where I could paste it in, press a "beautify" button, and have code that makes the translation.
I was reading this, and even found a thing called the hanna code or so, but that did not give the little part I am looking for...
I know a little bit of PHP and HTML. Is there a way to use it in that language or do I need to learn how to use JavaScript or whatever?
Could you point me in the right direction? I would love to get this puzzle solved, but I don't even know where to start....

Answer 1

Here is a JavaScript solution. You can directly paste the output in the first box, and the second box will immediately give the beautified translation.
Of course, I had to make some assumptions about the syntax of the original text, so let me know how this meets your needs:
document.querySelector("#source").addEventListener("input", function () {
const lines = this.value.split(/^;/m).slice(1).join("").split("\n");
const cols = lines.shift().toUpperCase().split(";")
.filter(Boolean).map(code => code.slice(0,3));
document.querySelector("#target").value = "OUT PUT:\n" +
lines.filter(line => /;\d/.test(line))
.map(line => line.split(";").filter(Boolean))
.map(([s, ...v]) => s + "\n" + v.map((value, i) =>
cols[i] + " " + value
).join("\n"))
.join("\n");
});
<table>
<tr>
<th>Paste output here:</th><th>Beautified:</th>
</tr>
<tr>
<td><textarea id="source" cols="30" rows="18"></textarea></td>
<td><textarea id="target" cols="30" rows="18" readonly></textarea></td>
</tr>
</table>

Answer 2

Your question is very broad but reading it carefully I'm going to assume that you are not interested in a specific coding example but moreso a strategy. We're I looking at a problem like this in HTML I would without question code it in JavaScript.
The main difference between JavaScript (JS) and PHP in the example you've stated (ie, in HTML) is that PHP is a server-side language while JS is client based. This means that for PHP to solve the problem you need a webserver (a place to host the script), a way to post to the server, a PHP script on the server that can make the conversion for you.
In addition to that for the PHP solution you need a way for HTML to make the server side request to make the translation for you (translation meaning converting the first form of the data into the second) ie the HTML page needs to ask the webserver for the answer, post the original data to the server and receive (catch) the result and display it... generally this is all done in JavaScript using a technology called Ajax.
Another approach to solving the server problem w/out JavaScript is to use the HTML FORM tag with an associated INPUT to submit the data to the server. Then the server will render an entirely new page in HTML that contains the changed data and return that to the client (your web browser) replacing the old HTML page with the updated one. A lot of work!
A simpler solution would be to just use JavaScript which will allow you to do all the work in your client (the webbrowser) and will not require a webserver, re-rendering the page, etc. Far simpler and a better place to start if you're just exploring into coding - which from your question seems the case.
I would research JavaScript and some simple tutorials for reading/setting values on the page. As for how to actually code the function in JS to make the conversion of the data... that's relatively straight forward IF you can assume that the data is "fair" (ie, has no errors, bugs, etc) otherwise the problem of determining the veracity of the data is a far far more complex problem than the actual conversion (this is often the case in Computer Science).
All that said, I think it is an awesome project for starting to learn JS and think it's a great place to start. Take a look at these examples for some basics of JS and how to move data from one place to another.
https://formidableforms.com/knowledgebase/javascript-examples/