I have an Arduino kit and a webserial API setup to receive the data into a html div with the id of target.

At the moment it is logging all the data into one stream (there are a few dials and switches on the Arduino).

The data looks like this...

RADI 61 RADI 62 RADI 63 RADI 64 WIND 1 WIND 0 WIND 1

...RADI being a dial value and WIND being an on / off switch.

Is there a way to separate this information into RADI and WIND chunks...ideally into separate HTML text boxes so I can manipulate that data?

Any help would be appreciated

Here is my current javascript code...

document.getElementById('connectButton').addEventListener('click', () => {
    if (navigator.serial) {
    connectSerial();
    } else {
    alert('Web Serial API not supported.');
    }
});

async function connectSerial() {
    const log = document.getElementById('target');
    
    try {
    const port = await navigator.serial.requestPort();
    await port.open({ baudRate: 9600 });
    
    const decoder = new TextDecoderStream();
    
    port.readable.pipeTo(decoder.writable);

    const inputStream = decoder.readable;
    const reader = inputStream.getReader();
    
    while (true) {
        const { value, done } = await reader.read();
        if (value) {
        log.textContent += value + '\n';
        }
        if (done) {
        console.log('[readLoop] DONE', done);
        reader.releaseLock();
        break;
        }
    }
    
    } catch (error) {
    log.innerHTML = error;
    }
}