1

HTML /コンセプト：

    <textarea id="input"></textarea>        
    <button onclick="format()">submit</button>
    <textarea id="output"></textarea>

私は定期的にドキュメントをクライアント用のhtmlに変換する必要があり、適切なHTMLを検索/置換+手動で変更/追加する必要があることにうんざりしています。夢のフォーマッターを探しましたが、何も見つかりませんでした（ぴったりのフォーマッターを知っている場合は投稿してください）。非常に簡単ですが、正規表現に慣れておらず、問題があります。他の投稿で見つけたregexpを使用してつなぎ合わせることができたのは次のとおりです。

    var email = /(\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim;
    var url = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
    var br = /(\r\n|\n|\r)/gm;

    function format() {

        var input = $('#input').val();

        var check1 = input.replace(br,"<br>");
        var check2 = check1.replace(url,'<a href="$1" target="blank">$1</a>');
        var check3 = check2.replace(email, '<a href="mailto:$1">$1</a>' );
        var check4 = check3.replace(etc, ...);

        var output = check4;
        $('#output').val(output);
    }

私がやりたいことが他にもいくつかありますが、正しい正規表現を見つけて書くことができないようです。これらは次のとおりです。

  1. 太字の文字を見つけて、適切なhtml/cssに置き換えます
  2. イタリック文字を見つけて、適切なhtml/cssに置き換えます

  3. 特定の文字（©、“、”、ñなど）を見つけて、適切な文字/エンティティに置き換えます。 

     [&#169; , " , " , &ntilde; , etc]

これが答えられた場合はお詫びしますが、これらのビットを見つけることができないようです（おそらく私は間違った質問をしていますか？）、太字/斜体を見つけたり、特定の文字/エンティティを置き換えたりするのに役立つでしょう！また、私がこれについて間違った方法で行っている場合は、私に電話してください。そんなにサンズ！

4

1 に答える 1

0

@sourcejediが指摘しているように、太字/斜体は実際にはオプションではないようです。しかし、必要な他のすべてのものを正規表現で検索/置換する方法を見つけました。繰り返しますが、これは非常に頻繁に行わなければならない非常に特殊なタスクです (通常は非常に長い [多くの場合、アクセント付きのスペイン語で] google doc ファイルを html に変換する)、他の誰かが同じ /同様のボート、これが私が最終的に得たものです：

HTML:

    <textarea id="input" cols="50" rows="10"></textarea><br>
    <button onclick="format()">format!</button><br>
    <textarea id="output" cols="50" rows="10"></textarea><br>

Javascript:

    function format() {

        var input = document.getElementById('input').value; // get input txt 
        var output = document.getElementById('output');     //target ouput txt box
        var i = input;                                      

        var email = /(\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim;
        var url = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
        var br = /(\r\n|\n|\r)/gm;

        i = i.replace(br, '<br>'+'\n'); 
        i = i.replace(url, '<a href="$1" target="blank">$1</a>'); 
        i = i.replace(email, '<a href="mailto:$1">$1</a>' );
        i = i.replace( /\u2018|\u2019|\u201A|\uFFFD/g, "'" );
        i = i.replace( /\u201c|\u201d|\u201e/g,  '"' );
        i = i.replace( /\u02C6/g, '^' );
        i = i.replace( /\u2039/g, '<' );
        i = i.replace( /\u203A/g, '>' );
        i = i.replace( /\u2013/g, '-' );
        i = i.replace( /\u2013/g, '-' ); 
        i = i.replace( /\u2022/g, '<span style="padding-left:15px;">&#38;'+'#8226;</span>' ); 
        i = i.replace( /\u00C9/g, '&#38;'+'Eacute;' ); // E w/accent
        i = i.replace( /\u00CD/g, '&#38;'+'Iacute;' ); // I w/accent
        i = i.replace( /\u00D3/g, '&#38;'+'Oacute;' ); // O w/accent
        i = i.replace( /\u00DA/g, '&#38;'+'Uacute;' ); // U w/accent
        i = i.replace( /\u00DD/g, '&#38;'+'Yacute;' ); // Y w/accent
        i = i.replace( /\u00D1/g, '&#38;'+'Ntilde;' ); // Nye
        i = i.replace( /\u00E1/g, '&#38;'+'aacute;' ); // a w/accent
        i = i.replace( /\u00E9/g, '&#38;'+'eacute;' ); // e w/accent
        i = i.replace( /\u00ED/g, '&#38;'+'iacute;' ); // i w/accent
        i = i.replace( /\u00F3/g, '&#38;'+'oacute;' ); // o w/accent
        i = i.replace( /\u00FA/g, '&#38;'+'uacute;' ); // u w/accent
        i = i.replace( /\u00FD/g, '&#38;'+'yacute;' ); // y w/accent
        i = i.replace( /\u00F1/g, '&#38;'+'ntilde;' ); // nye
        i = i.replace( /\u2014/g, '&#38;'+'#8212;' );  // mdash
        i = i.replace( /\u2026/g, '...' );      // elipses
        i = i.replace( /\u00A9/g, '&#38;'+'#169;' );   // copyright logo
        i = i.replace( /\u00AE/g, '&#38;'+'#174;' );      // restricted logo
        i = i.replace( /\u2122/g, '&#38;'+'#8482;' );  // trade mark logo
        i = i.replace( /\u00BC/g, '&#38;'+'#188;' );   // 1/4
        i = i.replace( /\u00BD/g, '&#38;'+'#189;' );   // 1/2
        i = i.replace( /\u00BE/g, '&#38;'+'#190;' );   // 3/4
        i = i.replace(/[\u02DC|\u00A0]/g, " "); // speacial spaces characters            

        output.innerHTML = i;
    }

...そして本当に興味のある方のために、調整可能なパラメーターを備えたバージョンがあります (メールのプリロード、カスタム CSS によるラッパー div の追加、target=blank トグル、mailto トグル、縮小など) http://jsfiddle.net/N4vrE/

于 2012-08-29T05:48:02.077 に答える