Question

我有以下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] [/ Button]无关的其他元素。对于以下内容：

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

Answer 1

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

两个提示，可以提高性能：

删除RegExp中的星标。我认为这是不必要的。

只调用$（'body'）。html（buttonReplaced）：

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

另一种解决方案：

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

Answer 2

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

正如你所看到的那样，最后有两个按钮，即使只有一个[Button] [/ Button]语句 - 这是因为首先你要用[{1}}替换[Button]来创建一个不匹配的标签。这会导致最后添加<a class='button'>。然后，您将[/ 1]替换为</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对其起源的回答

Answer 3

在正则表达式中使用+而不是星号。因为第一个也不会匹配任何东西

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

});

Answer 4

我认为这段代码$("body").html(buttonEnd);将替换按钮开始。也许你应该尝试append（）方法，如下所示：$("body").append(buttonEnd);

jQuery替换html文档中的Start和End标记

4 个答案: