7

JavaScript を使用して ap タグ内で括弧を付けた場合、テキストのフォントの太さを制御できるようにしたいと考えています。

例: 牛が {月} を飛び越えました。{} 内の font-weight が増加します。

これにより、エンド ユーザーはこれをテキスト領域に入力し、送信時に中かっこまたは中かっこ内のフォントの太さを変更してページに出力できます。

これに関するヘルプは素晴らしいでしょう。

4

5 に答える 5

4

これを行う方法は次のとおりです。

var ps = document.getElementsByTagName('p');
    foreach = Array.prototype.forEach;

foreach.call(ps, function (p) {
    var content = p.innerHTML;
    p.innerHTML = content.replace(/\{(.*?)\}|\((.*?)\)/g, function (m) {
        return '<span style="font-weight: bold;">' + m + '</span>';
    });
});
​

そしてもちろんフィドル。この例では、純粋な JavaScript だけが必要で、追加のライブラリは必要ありません。

  • 編集：

結果に括弧を表示したくない場合は、次を使用できます。

var ps = document.getElementsByTagName('p');
    foreach = Array.prototype.forEach;

foreach.call(ps, function (p) {
    var content = p.innerHTML;
    p.innerHTML = content.replace(/\((.*?)\)|\{(.*?)\}/g, function (m) {
        return '<span style="font-weight: bold;">' + m.replace(/[\(\)\{\}]/g, '') + '</span>';
    });
});

フィドル: http://jsfiddle.net/ma47D/4/

よろしくお願いします！

于 2012-12-19T10:52:04.497 に答える
1

次のようなmootoolsでそれを行うことができます：

window.addEvent('domready', function()
{
    $$('P').each(function(p)
    {
        p.set('html', p.get('text').replace(/{([^\}]*)*}/g,"<b>$1</b>"));
    });
});​

ページが完全にロードされた後に実行する必要があるため、domready は重要です。jquery への変換はそれほど難しくありません。

http://jsfiddle.net/Smw7Q/1/

于 2012-12-19T10:50:31.610 に答える
0

ローカルでは、次のように処理できます。

<!DOCTYPE html>
<html>
    <head>
        <script>
            function transfer(){
                document.getElementById("result").innerHTML=document.getElementById("demo").value.replace(/{/g,'<strong>').replace(/}/g,'</strong>');
            }
        </script>
    </head>
    <body>
        Input: <input type="text" name="input" id="demo"><br>
        <input type="button" value="Submit" onclick="transfer();">
        <p id="result"></p>
    </body>
</html>

テキストをサーバーに送信すると、魔法はサーバー側でも同様に実行できます。

于 2012-12-19T10:35:59.537 に答える
0

私のおすすめ

<!DOCTYPE html>
<html>
    <head>
        <style>
        p span {
            font-size:1.5em;
        }
        </style>
        <script>
        function regex(){
            document.getElementById("output").innerHTML=
                document.getElementById("input").value.replace(/{(.*?)}/g, "<span>$1</span>");
        };
        </script>
    </head>
    <body>
        <p id="output"></p>
        <textarea id="input" rows="30" cols="80"></textarea>
        <input type="button" value="Input" onclick="regex();"/>
    </body>
<html>

もちろん、送信する前に、データをサニタイズする必要があります。

于 2012-12-19T11:10:37.390 に答える
-1

何かを試してみましたが、もっとエレガントな解決策があると確信しています。

http://jsfiddle.net/xT7Fg/

$(document).ready(function(){
    $(tb).blur(function(){
        var str  = '';
        var nextFont = 0;
        $.each($(tb).val(),function(i,char){
            if(nextFont == 0){
                if(char == '{'){
                    if($(tb).val().indexOf(i,'}')){
                        str += '<font size="15">';
                        nextFont = $(tb).val().indexOf('}', i);
                    } else {
                        str += char;                    
                    }
                } else {
                   str += char;                
                }
            } else if (nextFont === i) {
                str += '</font>';
                 nextFont = 0;               
            } else {
                str += char; 
            }      
        });
        $("#txt").html(str);
    });
});
于 2012-12-19T10:45:48.550 に答える