求一个正则表达式

夜雨_Jason 2015-01-07 12:06:05

如下面这一段html，box里面的结构可以任意包含div、p、table、td、tr、img、a等标签，且层级没有限定。
求一个正则，匹配吃饭这2个字，但不能在a标签里面及img标签里（alt、title也不行），其他标签可以匹配，并将吃饭改为喝汤。
谢谢了！



<div id="box">谁吃饭？<p>你吃饭了吗<a href="xx.html" title="吃饭">你吃饭吗</a>呵呵吃饭吧<img src="xx.jpg" alt="吃饭吧" title="谁吃饭" />呵呵</p>吃饭了吗

		<div>谁吃饭？<p>你吃饭了吗<a href="xx.html" title="吃饭">你<span>跟谁吃饭</span>吗</a>呵呵吃饭吧<img src="xx.jpg" alt="吃饭吧" title="谁吃饭" />呵呵</p>吃饭了吗</div>

	</div>

...全文

222 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

夜雨_Jason 2015-01-13

打赏
举报

用了一个较为暴力的解决办法。直接替换innerHTML，在替换前，先遍历元素将含有关键词的title、alt统一清空。本想通过JS将清空后的title\alt还原回去的，但是因为不影响页面现有的功能，就不再去做这个功能。

夜雨_Jason 2015-01-08

打赏
举报

引用 3 楼 showbo 的回复:

[quote=引用 2 楼 kendyjack 的回复:] 如果一段一段去查找也很麻烦，因为里面层级可能会很多层，而且内容事实上可能会比较多，如论坛帖子。

我是觉得遍历比正则快对于嵌套的内容，这个要求正则写出来肯定回溯比较多，效率会很低。遍历直接获取所有节点，判断下标签类型和父节点是否是a就搞定了[/quote] 如果遍历，又该怎么改呢？下面我这样子改不了，会把标签也给输出来


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="box">
		干嘛去了，吃饭去了吗？
		<p>hehe,shid吃饭去了</p>
		<img src="images.jpg" alt="hehe吃饭了">
		爱干嘛干嘛吃饭还不给？
	</div>

	<script>
		var oBox = document.getElementById("box");
		var oBox2 = document.getElementById("box2");
		for(var i=0; i<oBox.childNodes.length;i++){
			if(oBox.childNodes[i].nodeType==3){
				str = oBox.childNodes[i].nodeValue.replace(/(吃饭)/g,function($1){
					return '<span style="position:relative;text-decoration:underline;"><a  href="#" target="_blank">' + $1 + '</a></span>';
				})
				oBox.childNodes[i].nodeValue = str;
			}
		}
	</script>
</body>
</html>

Go 旅城通票 2015-01-08

打赏
举报

是有点麻烦。。文本节点需要多余的标签才能设置html内容，调用replaceChild方法用range来搞好搞点。。参考

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="box">
        干嘛去了，吃饭去了吗？
        <p>hehe,shid吃饭去了</p>
        <p>hehe,,<a href="#">shid吃饭去</a>了</p>
        <img src="images.jpg" alt="hehe吃饭了">
        爱干嘛干嘛吃饭还不给？
    </div>
 <div id="box2">吃饭gogo</div>
<script>
    if (typeof Element != 'undefined' && !Element.prototype.contains) Element.prototype.contains = function (o) { do { if (this == o) return true } while (o = o.parentNode); return false };
    function parentIsA(o) { do { if (o.tagName == 'A') return true } while (o = o.parentNode); return false; }
    var oBox = document.getElementById("box"), key = '吃饭';
    var range;
    if (document.createRange) range = document.createRange();
    else range = document.body.createTextRange();
    if (range.findText) {//ie
        while (range.findText(key)) {
            if (!parentIsA(range.parentElement())&&oBox.contains(range.parentElement())) range.pasteHTML('<span style="position:relative;text-decoration:underline;"><a  href="#" target="_blank">' + key + '</a></span>');
            else range.move('character', key.length)
        }
    } else if (window.find) {
        var s, n;
        s = window.getSelection();
        while (window.find(key)) {
            if (!parentIsA(s.focusNode) && oBox.contains(s.focusNode)) {
                var n = document.createElement("span");
                n.style.position = "relative"
                n.style.textDecoration = "underline"
                s.getRangeAt(0).surroundContents(n);
                n.innerHTML = '<a  href="#" target="_blank">' + key + '</a>';
            }
        }
        s.removeAllRanges();
    }
</script>
</body>
</html>