QML 解析超链接及定制链接样式实战

QML link show and custom link color

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    id: root
    visible: true
    width: 800
    height: 600
    title: qsTr("Hello World")
    color: "#F1F1F1"

    readonly property var strRegex: /(https?:\/\/)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/gi
    readonly property var emailPattern: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/
    readonly property var strRegex1: /^[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)$/

    readonly property var textRegExp: new RegExp(strRegex)
    readonly property var textRegExp1: new RegExp(strRegex1)
    readonly property var emailRegExp: new RegExp(emailPattern)

    Rectangle {
        id: rect
        anchors.fill: parent
        color: "#80000000"
        MouseArea {
            anchors.fill: parent
            onClicked: {
                console.log("ZDS===============>click backgroud")
            }
        }

        Text {
            id: source
            text: "test testtesttesttesttest testhttps://www.foufos.gr/kino testtesttesthttp://www.foufos.gr/kino 255.255.255.0 192.168.1.1 www.baidu.com www.baidu.com imtoby@126.com"
            anchors.centerIn: parent
            anchors.verticalCenterOffset: -30
        }

        Text {
            id: result
            textFormat: Text.RichText
            text: source.text.replace(textRegExp, function(param) {
                var href
                if (emailRegExp.exec(param) != null) {
                    href = "mailto:" + param
                } else {
                    var href1
                    if (((href1 = textRegExp1.exec(param)) != null) && (href1 !== param)) {
                        href = "http://" + param
                    } else {
                        href = param
                    }
                }
                return "<a href='" + href + ("' style='color:\"%1\";text-decoration:%2'>")
                .arg(hoveredLink === href ? "#00FFFF" : "#FFFF00")
                .arg(hoveredLink === href ? "underline" : "none") + param + "</a>"
            })
            anchors.centerIn: parent
            anchors.verticalCenterOffset: 30
            onLinkActivated: {
                console.log("ZDS====================> link: ", link)
                Qt.openUrlExternally(link)
            }

            MouseArea {
                anchors.fill: parent
                acceptedButtons: Qt.NoButton
                cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor
            }
        }
    }

}

运行效果如下：

result