タイトルの特殊文字を保持したまま、改行したい。

[MUNEKAWA]

タイトル部分に改行を入れたいのですが、現在下記が記載されております。

{{ product.title | escape }}

※HTML上で、>や、"、などの特殊文字を表示するため必要です。

上記を保持したまま、改行できるようにするためのコードが知りたいです。

[株式会社フルバランス]

質問拝見しました。

<br>タグを機能するように以下コードを適用させれば改行ができるかと思います。

// product.titleからHTMLエスケープされたテキストを取得し、改行を挿入する関数
function insertLineBreaks(title) {
    return title.replace(/(?:\r\n|\r|\n)/g, '<br>');
}

// タイトル部分に改行を挿入して表示する
var productTitle = "{{ product.title | escape }}";
document.getElementById('product-title').innerHTML = insertLineBreaks(productTitle);

ご参考までにしてください。

お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。
何卒よろしくお願いします。

株式会社フルバランス

[MUNEKAWA]

返信頂きありがとうございます。

どこにどのように挿入すれば良いか分からず、
【main-product.liquid】内の
{{ product.title | escape }}　付近に挿入してみたのですが、間違っていると思います。
正しい方法をご教授頂ければ大変助かります。