2

我有以下 jQuery 代码片段，它应该将 [Button] Text Here [/Button] 之类的代码替换为：

<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);

});

我遇到的问题是它不断替换我页面上与标签 [Button] [/B​​utton] 无关的其他元素。例如：

  <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

实际上，我进行了快速测试，但无法重现您的问题。请提供更多详细信息，例如示例。

两个技巧，可以提高性能：

  1. 删除 RegExp 中的星号。我认为这是不必要的。

  2. 只调用一次 $('body').html(buttonReplaced) ：

    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 回答
1

问题源于更换发生的方式 - 请考虑以下小提琴：http: //jsfiddle.net/GYrYa/

正如您所看到的，最后有两个按钮，即使只有一个 [Button][/Button] 语句 - 这是因为首先您要替换 [Button] ，<a class='button'>它会创建一个不匹配的标签。这会导致</a>在末尾添加一个。然后，您将 [/Button] 替换为</a>，这会创建另一个不匹配的标签 - 这一次<a>，在末尾。

更好的解决方案是：http: //jsfiddle.net/GYrYa/1/

编辑： http: //jsfiddle.net/GYrYa/2/省略脚本标签匹配

编辑2： http: //jsfiddle.net/GYrYa/5/ - 最终解决方案，结合@Rain Diao非贪婪匹配

编辑3：添加了性能测试用例： http: //jsperf.com/eithed-rsc3，请阅读下面的讨论@Rain Diao's answer了解它的起源

于 2013-02-05T17:16:33.003 回答
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 回答
0

我认为这段代码$("body").html(buttonEnd)；将替换 buttonStart。Mybe 你喊试试 append() 方法，像这样：$("body").append(buttonEnd);

于 2013-02-05T16:59:49.263 回答