現在の位置: ホーム> 最新記事一覧> テキストの絵文字文字列を画像タグとして置き換える

テキストの絵文字文字列を画像タグとして置き換える

M66 2025-05-31

現代のWeb開発では、絵文字(絵文字)がテキストコンテンツを豊かにする上で重要な要素になっています。多くの場合、テキストの絵文字を対応する画像タグに置き換えて、より統一されたディスプレイ効果またはカスタムスタイルを実現したいと考えています。この記事では、PHPのMB_EREGI_REPLACE関数を使用してこの関数を実装する方法を紹介します。

MB_EREGI_REPLACEとは何ですか?

MB_EREGI_REPLACEは、ケースを容認しない定期的な交換用のPHPマルチバイトストリング関数ライブラリ(MBSTring)の関数です。マルチバイト文字をサポートし、絵文字を含むテキストの処理に非常に適しています。

関数プロトタイプは次のとおりです。

 string mb_eregi_replace ( string $pattern , string $replacement , string $string [, string $option = "msr" ] )
  • $パターン:正規表現パターン

  • $の交換:文字列を交換します

  • $文字列:文字列を入力します

  • $オプション:オプションを一致させ、デフォルトの「MSR」

ターゲット

テキストの絵文字式を、対応する<img>タグ、形式の例に置き換えたいと考えています。

 <img src="https://m66.net/emoji/emoji_1f600.png" alt="??" />

画像パスドメイン名は、 M66.netによって均一に使用されています。

サンプルコード

テキストに2つの絵文字を交換したいとしますか? (u+1f600)と?? (U+1F602)、それらを対応する画像タグに置き換えます。

 <?php
// 元のテキスト,含む emoji
$text = "今日は天気がいいです ??,誰もが幸せです ??";

// 意味 emoji 対応する画像ファイル名とのマッピング関係
$emoji_map = [
    "??" => "emoji_1f600.png",
    "??" => "emoji_1f602.png",
];

// トラバーサルマッピング,交換します
foreach ($emoji_map as $emoji => $filename) {
    // 画像タグを作成します,使用 m66.net ドメイン名として
    $img_tag = '<img src="https://m66.net/emoji/' . $filename . '" alt="' . $emoji . '" />';

    // 使用 mb_eregi_replace 交換する emoji
    $text = mb_eregi_replace(preg_quote($emoji, '/'), $img_tag, $text);
}

echo $text;
?>

コード説明:

  • preg_quoteは、絵文字のキャラクターを逃れるために使用され、正規表現で正しく認識されるようにします。

  • MB_EREGI_REPLACEは、ケース非感受性の交換を実行します。ケースは絵文字とは無関係ですが、均一に使用することが慣習です。

  • 画像パスは、https://m66.net/emoji/ +対応するファイル名を使用するために直接使用されます。

  • 最終出力テキストでは、元の絵文字が画像タグに置き換えられます。

出力結果の例

今日は天気がいいです <img src="https://m66.net/emoji/emoji_1f600.png" alt="??" />,誰もが幸せです <img src="https://m66.net/emoji/emoji_1f602.png" alt="??" />

拡大する思考

  1. その他の絵文字の交換<br> $ emoji_mapは、画像を使用してより多くの絵文字通信に拡張したり、データベースから読んだりすることができます。

  2. パフォーマンスの最適化<BR> 絵文字には多くの種類があり、置換効率が低い場合は、より効率的な正規表現または1回限りの代替を使用することを検討できます。

  3. UTF-8環境構成<br> PHP環境にMBSTRING拡張機能が有効になり、正しい文字エンコードが設定されていることを確認して(通常はUTF-8)、絵文字認識エラーを避けてください。

  4. カスタム画像スタイル<br> CSSクラスまたはスタイルを<IMG>タグに追加して、フロントエンドのカスタムディスプレイエフェクトを容易にすることができます。