40分请正则大虾帮忙写个正则表达式。

Question

如
var str="c";
<div class="out" onclick="' +this.name+'.bbb(this)" onmouseover="' +this.name+'.ccc(this,\'over\')" onmouseout="' +this.name+'.dddd(this,\'out\')">abcdefgada</div>'; 
用正则表达式匹配后想要得到的结果如下：
<div class="out" onclick="' +this.name+'.bbb(this)" onmouseover="' +this.name+'.ccc(this,\'over\')" onmouseout="' +this.name+'.dddd(this,\'out\')"><strong>c</strong>badefg<strong>c</strong>d<strong>c</strong><div>'; 
要求用js语言实现。

Answer 1

<textarea>
<div class="out" onclick="' +this.name+'.bbb(this)" onmouseover="' +this.name+'.ccc(this,'over')" onmouseout="' +this.name+'.dddd(this,'out')">abcdefgada </div>
<div class="out" onclick="' +this.name+'.bbb(this)" onmouseover="' +this.name+'.ccc(this,'over')" onmouseout="' +this.name+'.dddd(this,'out')">
abcde
<div class="out" onclick="' +this.name+'.bbb(this)" onmouseover="' +this.name+'.ccc(this,'over')" onmouseout="' +this.name+'.dddd(this,'out')">abcdefgada </div>
fgada </div>
</textarea>
<textarea style="width:700px; height:500px;">
</textarea>
<script>
var replaceInTextNode = function () {
var expression = /(<(?:"[^"]*"|'[^']*'|[^"'>]+)+>)|(?:(?!<\w).)+/g;
return function (text, handler) {
return String(text).replace(expression, function (lastMatch, $1) {
return $1 ? $1 : handler(lastMatch);
});
};
}();var key = 'c';
document.getElementsByTagName('textarea')[1].value = replaceInTextNode(document.getElementsByTagName('textarea')[0].value, function (v) {
return v.replace(new RegExp('(' + key + ')', 'g'), '<strong>$1</strong>');
});
</script>

Answer 2

re #2
直接 copy #1的代码
运行后
那个比较大的textarea里是结果.

Answer 3

...
哦...有个bug,修改下...
代码如下...<textarea>
<div class="out" onclick="' +this.name+'.bbb(this)" onmouseover="' +this.name+'.ccc(this,'over')" onmouseout="' +this.name+'.dddd(this,'out')">abcdefgada </div>
<div class="out" onclick="' +this.name+'.bbb(this)" onmouseover="' +this.name+'.ccc(this,'over')" onmouseout="' +this.name+'.dddd(this,'out')">
abcde
<div class="out" onclick="' +this.name+'.bbb(this)" onmouseover="' +this.name+'.ccc(this,'over')" onmouseout="' +this.name+'.dddd(this,'out')">abcdefgada </div>
fgada </div>
</textarea>
<textarea style="width:700px; height:500px;">
</textarea>
<script type="text/javascript">
var replaceInTextNode = function () {
var expression = /(<(?:"[^"]*"|'[^']*'|[^"'>]+)+>)|(?:(?!<\/?\w)[\S\s])+/g;
return function (text, handler) {
return String(text).replace(expression, function (lastMatch, $1) {
return $1 ? $1 : handler(lastMatch);
});
};
}();var key = 'c';
document.getElementsByTagName('textarea')[1].value = replaceInTextNode(document.getElementsByTagName('textarea')[0].value, function (v) {
alert(v);
return v.replace(new RegExp('(' + key + ')', 'g'), '<strong>$1</strong>');
});
</script>

Answer 4

结果出来了，那么请问大虾，那个
return String(text).replace(expression, function (lastMatch, $1) {
            return $1 ? $1 : handler(lastMatch);
这句代码的作用是什么？能帮小弟解释下吗？拜托了！

Answer 5

式子的思路是
把目标字符看成两类...
一类是html标记(HTMLElement)
另一类是文本(就是textNode里的nodeValue
所以式子分两部分
左边那部分是匹配HTMLElement的匹配到后放到$1里...
右边那部分是匹配textNode的...
中间 | 连接...
replace可以传一个函数进去...
每次匹配成功后都会调用这个函数取返回值为replacement.
对于这里.会把
匹配到的东西(lastMatch)放到arguments[0]
$1放到arguments[1](里面是HTMLElement)所以从函数里判断下,如果有$1那么就忽略.
否则就
处理下匹配到的东西(lastMatch)

Answer 6

谢谢大虾为我耐心解释。
那么再请问那个
handler(lastMatch); 
这个方法是在哪定义的呢？

Answer 7

还有，如果把
var expression = /(<(?:"[^"]*"|'[^']*'|[^"'>]+)+>)|(?:(?!<\/?\w)[\S\s])+/g;
这句换成
var reg = new  RegExp('(<(?:"[^"]*"|'[^']*'|[^"'>]+)+>)|(?:(?!<\/?\w)[\S\s])','g');
那么该段代码该如何改动才能使用？

Answer 8

形式参数...
return function (text, handler) {
这里的第二个参数就是它...
replaceInTextNode(document.getElementsByTagName('textarea')[0].value, function (v) {
调用的时候传了个函数进去...
这个函数可以对捕获到的textNode处理
把c加粗的操作就在这里做

Answer 9

额...为什么要换...
如果要换的话...
注意下转义就可以了var expression = new RegExp('(<(?:"[^"]*"|\'[^\']*\'|[^"\'>]+)+>)|(?:(?!<\\/?\\w)[\\S\\s])+', 'g');