2

[Button] Text Here [/Button] などのコードを次のようなものに置き換える必要がある次の jQuery スニペットがあります。

<a class="button">Text Here</a>

私が持っているJavaScriptは次のとおりです。

$(document).ready(function() {

    var buttonStart = $("body").html().replace(/\[Button\]*/ig,'<a class="button">');
    $("body").html(buttonStart);

    var buttonEnd = $("body").html().replace(/\[\/Button\]*/ig,'</a>');
    $("body").html(buttonEnd);

});

私が抱えている問題は、タグ [ボタン] [/ボタン] とは関係のないページ上の他の要素を置き換え続けることです。たとえば、次のとおりです。

  <div id="MiddleBarLeft"></div>

また、に置き換えられます

  <a class="button"><div id="MiddleBarLeft"></div></a>

上記の正規表現は [Button] および [/Button] タグを探すだけでよいのではないでしょうか?

また、他に効率的な方法はありますか？

ありがとう

=====================

更新..これは、置き換えたいものとは関係のない要素を置き換えるHTMLファイル全体です

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type='text/javascript'>
    $(document).ready(function() {

        var buttonStart = $("body").html().replace(/\[Button\]/ig,'<a class="button">');
        $("body").html(buttonStart);

        var buttonEnd = $("body").html().replace(/\[\/Button\]/ig,'</a>');
        $("body").html(buttonEnd);

    });
    </script>


    <style>
    li{ 
    list-style:none;
        padding-top:10px;
        padding-bottom:10px;}   

    .button, .button:visited {
        background: #222 url(overlay.png) repeat-x; 
        display: inline-block; 
        padding: 5px 10px 6px; 
        color: #fff; 
        text-decoration: none;
        -moz-border-radius: 6px; 
        -webkit-border-radius: 6px;
        -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
        -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
        text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
        border-bottom: 1px solid rgba(0,0,0,0.25);
        position: relative;
        cursor: pointer
    }
    </style> 



    </head> 
        <body> 

     <div>          
           <ul>
            <li>[Button]Test[/Button]</li>
            <li></li>
            <li>Sample Text</li>
            </ul>
     </div>       


        </body> 
    </html>
4

4 に答える 4

1

問題は、置換が発生する方法に起因します-次のフィドルを検討してください：http： //jsfiddle.net/GYrYa/

ご覧のとおり、[Button] [/ Button]ステートメントは1つしかありませんが、最後に2つのボタンがあります。これは、最初に[Button]を置き換えて<a class='button'>、一致しないタグを作成するためです。これにより</a>、最後にが追加されます。次に、[/ Button]をに置き換えます。これにより、最後に</a>別の一致しないタグが作成されます。<a>

より良い解決策はこれです：http： //jsfiddle.net/GYrYa/1/

編集： http： //jsfiddle.net/GYrYa/2/スクリプトタグの一致を省略します

編集2： http: //jsfiddle.net/GYrYa/5/-@RainDiaoの貪欲でないマッチングを組み込んだ最終的な解決策

編集3：追加されたパフォーマンステストケース：http ： //jsperf.com/eithed-rsc3、その起源についての@RainDiaoの回答の下の議論を読んでください

于 2013-02-05T17:16:33.003 に答える
1

実際、簡単なテストを行いましたが、問題を再現できません。例のように、詳細を教えてください。

パフォーマンスを向上させるための 2 つのヒント:

  1. RegExp の星を削除します。不要だったと思います。

  2. $('body').html(buttonReplaced) を 1 回だけ呼び出します。

    var buttonReplaced = $("body").html()
                     .replace(/\[Button\]/ig,'<a class="button">')
                     .replace(/\[\/Button\]/ig,'</a>');
$('body').html(buttonReplaced);

  3. 別の解決策：

    var buttonReplaced= $('body').html().replace(/\[Button\](.*?)\[\/Button\]/gi, '<a class="button">$1</a>');
$('body').html(buttonReplaced);
于 2013-02-05T17:08:51.507 に答える
0

私はこのコードだと思います$("body").html(buttonEnd); buttonStartを置き換えます。次のように、append（）メソッドを試してみてください。$("body").append(buttonEnd);

于 2013-02-05T16:59:49.263 に答える
0

正規表現で星の代わりに + を使用します。最初のものは何も一致しないので

$(document).ready(function() {

    var buttonStart = $("body").html().replace(/\[Button\]/ig,'<a class="button">');
    $("body").html(buttonStart);

    var buttonEnd = $("body").html().replace(/\[\/Button\]/ig,'</a>');
    $("body").html(buttonEnd);

});
于 2013-02-05T16:54:33.970 に答える