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

jQuery replace Start and End tag in html document

本文关键字：Start End 标记 替换 html 文档 jQuery      更新时间：2023-09-26

我有下面的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);
});

我遇到的问题是，它不断替换我页面上与Tags[Button][/Button]无关的其他元素。对于insance如下：

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

也被替换为

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

我上面的Regex不应该只寻找[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>

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

正如你所看到的，最后有两个按钮，尽管只有一个[Button][/Button]语句——这是因为首先你要用<a class='button'>替换[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对其起源的回答

实际上，我做了一个快速测试，但无法重现您的问题。请给我更多的细节，比如一个例子。

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

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

我认为这段代码是$("body").html(buttonEnd)；将取代按钮Start。我会喊try-append（）方法，如下所示：$("body").append(buttonEnd);

在正则表达式中使用+而不是星号。由于第一个将匹配什么也没有

$(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);
});
相关文章：