1

HTML/概念:

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

我经常需要为客户将文档转换为 html,而且我厌倦了不得不查找/替换 + 手动更改/添加适当的 HTML。所以我寻找了我梦想中的格式化程序,但找不到任何东西(如果你知道合适的格式化程序,请发布),所以我想我会用 javascript 编写自己的格式化程序。这非常简单,但我不熟悉正则表达式并且遇到了一些麻烦,这是我能够使用我在其他帖子中找到的正则表达式拼凑而成的内容:

    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 指出的那样,看起来粗体/斜体并不是一个真正的选择。但我想出了如何用正则表达式查找/替换我需要的所有其他内容。同样,这是一项非常具体的任务,我碰巧经常要做(将通常很长的 [通常是西班牙语 w/重音字符] 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 回答