ログイン新規登録
新規登録ログイン
ブランドリソース OFUSE KITFAQ・お問い合わせご意見ご要望フォームOFUSEからのお知らせ利用規約プライバシーポリシー特定商取引法に基づく表記運営会社
POTOFUpibサービスガイド Sozi U
User Icon

沼崎落子

2023/03/27 13:14

小説投稿サイトのルビタグからHTMLタグへ変換するJavaScript

0
0

日本語が合ってるか分かりません。pixiv記法のままルビタグとして変換するスクリプトです。

pixivから個人サイトに動きたい人とか、pixivの記法の方がルビの対応が楽! みたいな人向けです。

あると便利かなーと思います。他の小説サイトのルビ記法はあったけれど、pixivは見つけられなかったので……。(前はどこかにあったよなと思って探したんですが。)


余談終わり。ここから本題。


jQueryのプラグインを利用しています。

https://nanos.jp/sikaku0/blog/2/15/


以下スクリプト(ofuseにペーストすると改行が消えるのでもうこのままで……。)

レンタルホームページに導入する場合には以下のコードを

<script>

//以下コード

(コピペのコード)

</script>

こんな感じで書いておいてください。


$(function(){ $('body').replaceText(/\[\[rb:(.*?)\s&#62;\s(.*?)\]\]/gs,'<ruby>$1<rp>(</rp><rt>$2</rt><rp>)</rp></ruby>'); }); (function($) { $.fn.replaceText = function(pattern, replacement, nofollow) { var htmlEsc = str => str.replace(/[&<>'"`]/g, function(s) { return '&#' + s.charCodeAt(0) + ';'; }); var $not = this.find(nofollow || 'script,style').find('*').addBack(); this.find('*').addBack().not($not).contents().each(function() { if (this.nodeType != 3) return true; var str = htmlEsc($(this).text()); if (!str.match(pattern)) return true; $(this).replaceWith(str.replace(pattern, replacement)); }); return this; }; })(jQuery);



なろう、カクヨム、青空文庫などにもフル対応したスクリプト

jQueryのプラグインを使用しているのでCDNを読み込んでください~~。

以下、コード


(function( $ ){

$.fn.replaceText = function(pattern,replacement,nofollow) {

var htmlEsc = str => str.replace(/[&<>'"`]/g,function(s){ return '&#'+s.charCodeAt(0)+';'});

var $not = this.find(nofollow||'script,style').find('').addBack();

this.find('').addBack().not($not).contents().each(function(){

if( this.nodeType != 3 ) return true;

var str = htmlEsc( $(this).text() );

if( !str.match(pattern) ) return true;

$(this).replaceWith( str.replace(pattern,replacement) );

});

return this;

};

$.fn.wrapText = function(pattern,tagname,nofollow) {

var pattern = pattern || /&#\d+;|\S/g;

var tagname = tagname || 'span';

var $adv = this.find(tagname);

return this.replaceText(pattern,'<'+tagname+'>$&</'+tagname+'>',nofollow).find(tagname).not($adv);

};

})( jQuery );

$(function(){

$('.comment').each(function() {

$(this)

.replaceText(/-rb([\s\S]*?)([\s\S]*?)-/g,'<ruby>$1<rp>(</rp><rt>$2</rt><rp>)</rp></ruby>')

.replaceText(/\[\[rb:([^\]]+?)&#62;([^\]]+?)\]\]/g,'<ruby>$1<rt>$2</rt></ruby>')

.replaceText(/([\||])(.+?)《(.+?)》/g,'<ruby>$2<rt>$3</rt></ruby>')

.replaceText(/([\||])(.+?)((.+?))/g,'<ruby>$2<rt>$3</rt></ruby>')

.replaceText(/([\||])(.+?)\((.+?)\)/g,'<ruby>$2<rt>$3</rt></ruby>')

.replaceText(/([一-龠]+)《(.+?)》/g,'<ruby>$1<rt>$2</rt></ruby>')

.replaceText(/([一-龠]+)(([ぁ-んァ-ヶ]+?))/g,'<ruby>$1<rt>$2</rt></ruby>')

.replaceText(/([一-龠]+)\(([ぁ-んァ-ヶ]+?)\)/g,'<ruby>$1<rt>$2</rt></ruby>')

.replaceText(/([\||])《(.+?)》/g,'《$2》')

.replaceText(/([\||])((.+?))/g,'($2)')

.replaceText(/([\||])\((.+?)\)/g,'($2)');

});

});


おわり。

コメントするにはログインが必要です

    個人サイト向け ファビコンの設定

    2023/03/31

    【記事更新】個人サイトのバックアップのはなし

    2023/03/26

    カテゴリー

    個人サイト(29)note(8)てがろぐ(初心者向け)(4)依頼レポ(4)ミスキー(2)もっと見る
    User Icon

    沼崎落子

    ファンレターを送る

    お知らせヘルプ利用規約プライバシーポリシー特定商取引法に基づく表記運営会社

    ©Sozi, Inc.