📘 公式リファレンス🔧 リファレンス/フィルター初級

highlight フィルター（検索キーワードをマーク）

文字列内の指定した単語をすべて `<strong class="highlight">` で囲み、検索結果ページでキーワードを目立たせる。

用途

検索結果ページで、ユーザーが入力した検索キーワードを商品説明やコンテンツ本文内でハイライト表示するとき。

設置場所

search.liquid や collection.liquid の検索結果ループ内で、`{{ item.description | highlight: search.terms }}` のように記述。テンプレート内で `{{ 文字列 | highlight: キーワード }}` の形で使用する。

注意点

search.terms は複数キーワード検索時に空白区切りで複合されるため、単一キーワードのみハイライトされる。CSS で `.highlight` クラスに背景色や太字を指定しておくと視認性が向上する。HTML エスケープ済みの文字列に対しても `<strong>` タグは正しく挿入されるが、すでに HTML マークアップ内に埋め込まれた場合は意図しない位置でタグが分割される可能性があるため、プレーンテキスト文字列に対してのみ適用する。

タグ:searchstringhtmlkeyword

仕様

40 行 / json

{
  "category": "html",
  "deprecated": false,
  "deprecation_reason": "",
  "description": "",
  "parameters": [
    {
      "description": "The string that you want to highlight.",
      "name": "highlighted_term",
      "positional": true,
      "required": true,
      "types": [
        "string"
      ]
    }
  ],
  "return_type": [
    {
      "type": "string",
      "name": "",
      "description": "",
      "array_value": ""
    }
  ],
  "examples": [
    {
      "name": "",
      "description": "",
      "syntax": "",
      "path": "/search?q=love",
      "raw_liquid": "{% for item in search.results %}\n  {% if item.object_type == 'product' %}\n    {{ item.description | highlight: search.terms }}\n  {% else %}\n    {{ item.content | highlight: search.terms }}\n  {% endif %}\n{% endfor %}",
      "parameter": false,
      "display_type": "text",
      "show_data_tab": true
    }
  ],
  "summary": "Wraps all instances of a specific string, within a given string, with an HTML `&lt;strong&gt;` tag with a `class` attribute\nof `highlight`.",
  "syntax": "string | highlight: string",
  "name": "highlight"
}

出典・ライセンス

Source:: Shopify/theme-liquid-docs/data/filters.json
Repository:: https://github.com/Shopify/theme-liquid-docs
License:: MIT

このコードは Shopify 著作の MIT ライセンスソースです。原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。

highlight フィルター（検索キーワードをマーク）

仕様

出典・ライセンス

関連項目

avatar フィルター（顧客アバター画像HTML生成）

default_errors フィルター（フォーム送信エラーを日本語化）

date フィルター（日付を指定形式でフォーマット）

payment_terms フィルター（Shop Pay分割払いバナーを生成）

abs フィルター（数値の絶対値を取得）

append フィルター（文字列の末尾に追加）