0

私は非常に初心者の Web ページ ビルダーで、現在、リンク先のページに応じてリンクの色を変更する必要がある Web サイトの作成に取り組んでいます。リンクは、特定のユーザー入力基準によってさまざまなクラス (例: 良い、悪い、中立) に分類されます。たとえば、ユーザーが興味を持っていると思われるコンテンツを含むリンクは、ユーザーが (おそらく) 見たくないものを青で表示します。通常のテキストなどに色付けされます。

コンテンツへのリンク (MySQL データベースに保存されている) の Web ページを解析し、ページ上のすべてのリンクの色を変更する方法が必要だと思います (したがって、HTML のリンク クラスも変更できる必要があります)。適応したページをユーザーに出力する前。正規表現はこれらのリンクを見つけるのに適した方法ではないことを読みました-ライブラリを使用する必要がありますか?もしそうなら、html5libは私がやっていることに適していますか?

4

1 に答える 1

2

入力 HTML を壊して強制的に「修復」する PHP HTML パーサーで自分を複雑にする必要はありません。

PHP と JavaScript を組み合わせる方法は次のとおりです。完全に動作し、テスト済みのソリューションです。

<?php
$arrBadLinks=array(
    "http://localhost/something.png",
    "https://www.apple.com/something.png",
);
$arrNeutralLinks=array(
    "http://www.microsoft.com/index.aspx",
    "ftp://samewebsiteasyours.com",
    "ftp://samewebsiteasyours.net/file.txt",
);
?>
<html>
    <head>
        <script>
        function colorizeLinks()
        {
            var arrBadLinks=<?php echo json_encode($arrBadLinks);?>;
            var arrNeutralLinks=<?php echo json_encode($arrNeutralLinks);?>;

            var nodeList=document.getElementsByTagName("*");
            for(var n=nodeList.length-1; n>0; n--)
            {
                var el=nodeList[n];

                if(el.nodeName=="A")
                {
                    if(arrBadLinks.indexOf(el.href)>-1)
                        el.style.color="red";
                    else if(arrNeutralLinks.indexOf(el.href)>-1)
                        el.style.color="green";
                    else
                        el.style.color="blue";
                }
            }
        }

        if(window.addEventListener)
            window.addEventListener("load", colorizeLinks, false);
        else if (window.attachEvent)
            window.attachEvent("onload", colorizeLinks);
        </script>
    </head>
    <body>
        <p>
            <a href="http://www.microsoft.com/index.aspx">Neutral www.microsoft.com/index.aspx</a>
        </p>
        <p>
            <a href="http://localhost/something.png">Bad http://localhost/something.png</a>
        </p>
    </body>
</html>

相対 URL では機能しません。必ず絶対 URL にしてください。そうしないと、比較が失敗します (または、既存の相対 URLのhttp://current-domain.xxxを埋めるようにコードを更新します)。

于 2012-09-07T15:31:15.927 に答える