jQuery替换html文档中的Start和End标记
jQuery replace Start and End tag in html document
我有下面的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可以提高性能:
-
删除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);
我认为这段代码是$("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);
});
- 得到"TypeError:无法读取属性'filename'未定义的“;调用“npm start
- Module.start()已激发两次
- "TypeError:t.start未定义”;,在fullcalendar.min.js中,同时在我的网站上使
- 制作Easing Slider Start横幅取决于一周中的哪一天
- 如何在 http 上调用 end().服务器响应对象
- HTML5 video .end 事件在 Chrome 中调用,但不是 FF
- 这段代码的含义是什么 'start = +start ||0;' 在 JavaScript 中
- 角度种子克隆的“npm start”命令中出错
- wavesurfer.js play([start[, end]]) end not working
- URL http://maps.google.com/maps?saddr=Start&daddr=end 继续
- 在同一元素中使用 ng-repeat-start 和 ng-repeat-end
- 为什么ng-repeat-start和ng-repeat- end不能正常工作
- Nested ng-repeat-start / ng-repeat-end
- 在ng-repeat-start和ng-repeat-end中使用作用域
- 是否有一种方法来使用' ng-repeat-start/end '的dom元素谁不是兄弟
- AngularJS的ng-repeat-start ng-repeat-end与表和rowspan
- 使用ng-repeat-start和ng-repeat-end导致过滤器被无限期调用
- 在不知道实际textNodes的情况下,通过int offset (start-end)突出显示HTML中的文本
- HTML5,blob.slice(start,end)和FileReader()之间的数据大小差异[也就是如何在blob
- jQuery替换html文档中的Start和End标记