インタビュー記事の横棒2つ（長音やダッシュ記号）を自動で統一して綺麗につなげる方法

インタビュー記事や対談記事では、よくインタビュアーなどのコメントの文頭や会話の間を示すために、横棒2つ（長音やダッシュなどの記号）が入っています。

ーーたとえば、こんな感じですね。

この表記は文章も読みやすくなるため多くのサイトで見られる表現方法ですが、一方で各自が手入力していると、どうしても異なる種類の記号が混在してしまうことがあります。

先日もお客様からこんなご相談をいただきました。

お客様

記事を書く人によって横棒の長さがバラバラなのと、環境によっても見え方が違うので困っています。横棒の表示をあとから自動で揃える方法はありますか？

そこで今回は、JavaScriptを使ってテキストを自動変換しつつ、横棒2つを1本の長い線につなげて表示させる方法をご紹介します。

ダッシュやハイフンなど主な横棒の種類
JavaScriptで横棒2つのテキスト要素を自動置換
- Vanilla JSのコード
- jQuery用のコード
置換前と置換後の比較
よくあるご質問
まとめ

ダッシュやハイフンなど主な横棒の種類

表記揺れの原因となる、横棒や横線に見える記号の種類については、主要なものだけでもかなりの数に上ります。

ハイフンマイナス：-（U+002D）
enダッシュ：–（U+2013）
emダッシュ：—（U+2014）
フィギュアダッシュ：‒（U+2012）
クォーテーションダッシュ：―（U+2015）
全角ハイフンマイナス：－（U+FF0D）
全角長音：ー（U+30FC）
全角罫線：─（U+2500）
スモールemダッシュ：﹘（U+FE58）
スモールハイフンマイナス：﹣（U+FE63）
2emダッシュ：⸺（U+2E3A）
3emダッシュ：⸻（U+2E3B）

参考：ハイフンとかダッシュとかUnicodeにあるたくさんの横線(全135文字) – NaviPlus Engineers’ Blog

お客様

主な横線・横棒の記号だけでも、こんなに種類があるんですね・・。これでは、人によってバラバラなのも当然ですね。

JavaScriptで横棒2つのテキスト要素を自動置換

今回ご紹介するのは、JavaScriptを使って、フロント側だけで様々な横棒2つの要素を自動で置換し、表示を統一させるためのコードです。

Vanilla JSとjQuery、2種類のコードを記載していますので、サイトにあわせてお使いいただければ幸いです。

Vanilla JSのコード

// 置換パターンを指定
const replacementPatterns = [
	{ from: /ーー/g, to: '──' },
	// 必要に応じて他のパターンを追加
	// { from: /--/g, to: '──' },
	// { from: /－－/g, to: '──' },
];

// テキストを置換する関数
function replaceText(element) {
	let content = element.innerText;
	replacementPatterns.forEach(pattern => {
		content = content.replace(pattern.from, pattern.to);
	});
	element.innerText = content;
}

// ページ上の特定の要素に対してテキスト置換を実行
document.addEventListener('DOMContentLoaded', () => {
	// 置換を適用したい要素のセレクタを指定
	const elements = document.querySelectorAll('.sample-text');	
	elements.forEach(replaceText);
});

jQuery用のコード

// 置換パターンを指定
const replacementPatterns = [
	{ from: /ーー/g, to: '──' },
	// 必要に応じて他のパターンを追加
	// { from: /--/g, to: '──' },
	// { from: /－－/g, to: '──' },
];

// テキストを置換する関数
function replaceText() {
	let content = $(this).text();
	$.each(replacementPatterns, (_, pattern) => {
		content = content.replace(pattern.from, pattern.to);
	});
	$(this).text(content);
}

// ページ上の特定の要素に対してテキスト置換を実行
$(document).ready(() => {
	// 置換を適用したい要素のセレクタを指定
	$('.sample-text').each(replaceText);
});

最初に、置換前と置換後のテキストをパターンとして指定します（3行目〜）。
今回は例として「長音（音引き）2つ」のみを対象にしていますが、それ以外にも水平線やハイフンなどの様々な表記揺れが存在する場合は、必要に応じて他の置換パターンを追加していきます。

次に、置換を適用したい要素のセレクタを指定します（21行目）。
なるべくスコープを狭くして指定すると、パフォーマンスが向上します。