Transform Japanese date notation to <time> element using PostHTML
Before:
<p><x-japanese-date>2022年1月2日</x-japanese-date></p>
<p><x-japanese-date>2022年1月</x-japanese-date></p>
<p><x-japanese-date>2022年</x-japanese-date></p>
<p><x-japanese-date lang="ja"> 2022 年 1 月 2 日 </x-japanese-date></p>
<!-- ↓ not transform -->
<p><x-japanese-date>2022年123月2日</x-japanese-date></p><!-- Incorrect format -->
<p><x-japanese-date datetime="2022-01-02">2022年1月2日</x-japanese-date></p><!-- Do not include the `datetime` attribute -->
<!-- ↓ It is possible to set the transform to occur only when a specific class name is included -->
<p><span class="japanese-date">2022年1月2日</span></p>
<p><span class="foo japanese-date bar">2022年1月2日</span></p>After:
<p><time datetime="2022-01-02">2022年1月2日</time></p>
<p><time datetime="2022-01">2022年1月</time></p>
<p><time datetime="2022">2022年</time></p>
<p><time lang="ja" datetime="2022-01-02"> 2022 年 1 月 2 日 </time></p>
<p><x-japanese-date>2022年123月2日</x-japanese-date></p>
<p><x-japanese-date datetime="2022-01-02">2022年1月2日</x-japanese-date></p>
<p><time datetime="2022-01-02">2022年1月2日</time></p>
<p><time class="foo bar" datetime="2022-01-02">2022年1月2日</time></p>npm i -D posthtml-time-japanese-dateimport posthtml from 'posthtml';
import posthtmlTimeJapaneseDate from 'posthtml-time-japanese-date';
const beforeHtml = '<!DOCTYPE html>...';
const result = posthtml([
posthtmlTimeJapaneseDate({ element: 'x-japanese-date' })
]).process(beforeHtml);
const afterHtml = result.html;-
element[Required] - Element name
-
class[Optional] - Class name
e.g. { element: 'x-japanese-date' }, { element: 'span', class: 'japanese-date' }