Rus*_*sak 5 html javascript regex jquery
假设我有一个看起来像这样的HTML页面:
<html><body>
00123
<input value="00123">
00456
</body></html>
我想使用javascript/jQuery使它看起来像这样:
<html><body>
<a href="#00123">00123</a>
<input value="00123">
<a href="#00456">00456</a>
</body></html>
基本上我想用HTML锚标签将文档中的正则表达式匹配的普通字符串包装起来.在这个例子中,我想做的事情如下:
$('body').html($('body').html().replace(/(00\d+)/, '<a href="#$1">$1</a>'));
通过此示例查看jsFiddle:http://jsfiddle.net/NATnr/2/
此解决方案的问题是input元素内的文本被匹配和替换.
有谁知道如何使用javascript/jQuery以这种方式匹配和替换文档中的纯文本？
尝试过滤了body的contents()由节点类型,仅保留文本节点,然后用jQuery生成的锚元素替换它们(这些节点的任何额外的文本将被保存为文本节点):
$('body').contents().filter(function() {
return this.nodeType === 3;
}).each(function() {
$(this).replaceWith($(this).text().replace(/(00\d+)/g, '<a href="#$1">$1</a>'));
});
如你所知,大多数情况下用正则表达式解析HTML并不是一个好主意(注意小马,它们是邪恶的),但如果你要分离你要解析的HTML的一部分,它遵循一个相对简单的模式,它是一个可行的选择.
编辑:在正则表达式中包含g标志(全局修饰符),以允许在单个文本节点内匹配多个锚点.
最终解决方案最终看起来像这样:
jQuery.fn.linker = function () {
$(this).contents()
.filter(function() { return this.nodeType != Node.TEXT_NODE; })
.each(function () { $(this).linker(); });
$(this).contents()
.filter(function() { return this.nodeType == Node.TEXT_NODE; })
.each(function () {
$(this).replaceWith(
$(this).text().replace(/(00\d+)/g, '<a href="#$1">$1</a>')
);
});
}
$(document).ready(function () {
$('body').linker();
});
在这里看到jsFiddle:http://jsfiddle.net/fr4AL/4/
谢谢: