如何去除Html5-QRCode扫描结果中的http://前缀

使用html5-qrcode库实现摄像头扫描二维码并将结果显示到文本框时，发现扫描输出自带http://前缀，想去除该前缀。相关代码如下：

HTML部分：

QR Code: <input type="text" id="QRCode" name="QRCode" value="Please scan the QR code" disabled="disabled"><br/><br/>

JavaScript部分：

let outputContainer = document.getElementById('QRCode');
var html5QrcodeScanner = new Html5QrcodeScanner(
    "qr-reader", { fps: 10, qrbox: 250 });

function onScanSuccess(decodedText, decodedResult) {
    if (decodedText !== lastResult) {
        console.log(`Scan result: ${decodedText}`, decodedResult);
        outputContainer.value = decodedText;
    }
}

html5QrcodeScanner.render(onScanSuccess);

尝试修改库的.js文件未成功，文件中几乎无"URL"、"http"或"http://"相关内容，GitHub项目页搜索也无结果。

解决方案 #

无需修改库文件，直接在扫描成功的回调函数中对结果做字符串处理即可：

修改后的onScanSuccess函数：

function onScanSuccess(decodedText, decodedResult) {
    if (decodedText !== lastResult) {
        console.log(`Scan result: ${decodedText}`, decodedResult);
        // 去除http://前缀
        let processedText = decodedText.startsWith('http://') ? decodedText.slice(7) : decodedText;
        // 若需同时处理https://，可取消下面注释
        // processedText = processedText.startsWith('https://') ? processedText.slice(8) : processedText;
        outputContainer.value = processedText;
    }
}

逻辑说明 #

• 用startsWith()判断结果是否以http://开头，该方法兼容性覆盖绝大多数现代浏览器；
• 确认前缀存在后，用slice(7)截取掉前7个字符（http://刚好7位）；
• 如果二维码可能包含https://前缀，添加对应判断即可，https://共8位，所以用slice(8)。

内容的提问来源于stack exchange，提问作者taslo