首页 新闻 会员 周边

JS replace 正则:求大神进来看一看,弄了一下午了没弄出来

0
悬赏园豆:100 [已解决问题] 解决于 2015-07-10 16:03

原始字符串 var sourceText="";

sourceText有很多种情况。 比如:

情况1: sourceText="Where there is great love, <span style="color: #0000ff; font-weight: bold;">there</span> are always miracles.";

情况2:sourceText="Where there is great love, <span style="color: #0000ff; font-weight: bold;">there</span> <span style="color: #0000ff; font-weight: bold;">

are</span> always miracles.";

情况3:...

需要处理的字符串:there are always

现在的需求是: 从原始字符串中找到需要处理的字符串,然后高亮加黄色背景显示。但是原始字符串里可能所有的单词都已经被加粗和加字体颜色,这样直接找"there are always"这个字符串是找不到的。需要处理的字符串可能是一个单词,也可能是一个句子。

 

以sourceText为情况2和需要处理的字符串是there are always举例, 需要得到的结果是:Where there is great love, <span style="background-color:yellow;font-we;ight:inherit;"><span style="color: #0000ff; font-weight: bold;">there</span> <span style="color: #0000ff; font-weight: bold;">

are</span> always</span> miracles.

 

跪求大神不吝赐教!!!

能帮忙写出code最佳!!!

一下午没弄出来,实在是没招了!!!

在线等,

Help me...

GEEKc的主页 GEEKc | 初学一级 | 园豆:39
提问于:2015-07-09 16:11
< >
分享
最佳答案
0

哈哈, 用大叔那一招来说就是,一个个的抓出来, 严刑拷打。

收获园豆:40
请叫我头头哥 | 大侠五级 |园豆:9382 | 2015-07-10 11:10

头头哥,你可以帮忙给一个小的demo吗?

在线等,大神,多谢了。

GEEKc | 园豆:39 (初学一级) | 2015-07-10 13:47

@GEEKc: 

     // sourceText=原始字符串, matchText=需要处理的字符串
        function GetHightLight(sourceText, matchText)
        {
            var matchSyntax = "(<span[^>]*>)*" + matchText.split(" ").join("\\s*(<\/span>)*\\s*(<span[^>]*>)*") + "\\s*(<\/span>)*\\s*";
            var reg = new RegExp("(" + matchSyntax + ")", "gi");
            sourceText = sourceText.replace(reg, "<span style='background-color:yellow;font-weight:inherit;'>$1</span>")
            return sourceText;
        }

你可以试试上面这个代码,我在本地已经测试了, 没有问题。

你看看在你那可以不, 如果有问题就继续追问吧!

请叫我头头哥 | 园豆:9382 (大侠五级) | 2015-07-10 15:25

@请叫我头头哥: 测试通过。 多谢

GEEKc | 园豆:39 (初学一级) | 2015-07-10 15:58

@请叫我头头哥: 强!!!

幻天芒 | 园豆:37175 (高人七级) | 2015-07-10 16:28

@幻天芒: 哈哈, 其实正则不难,就是绕而已, 得慢慢拼慢慢测。 麻烦了点。 

请叫我头头哥 | 园豆:9382 (大侠五级) | 2015-07-10 16:29

@请叫我头头哥: 我能说,我每次都要去翻文档么。记不住那些符号。

幻天芒 | 园豆:37175 (高人七级) | 2015-07-10 16:31

@幻天芒: 同感, 我也记不住, 要不翻文档,有个10天半个月没用正则,再让用就玩完。

请叫我头头哥 | 园豆:9382 (大侠五级) | 2015-07-10 16:38
其他回答(5)
0

你要先用正则把<>都去掉.然后就能获取到

吴瑞祥 | 园豆:29449 (高人七级) | 2015-07-09 17:00

用正则把<>都去掉? 然后怎么做呢?

吴老师如果能在百忙之中帮忙写一下code, 晚辈会万分感谢!

支持(0) 反对(0) GEEKc | 园豆:39 (初学一级) | 2015-07-09 17:03

@GEEKc:  [<].*?[>]  replace("")

支持(0) 反对(0) 吴瑞祥 | 园豆:29449 (高人七级) | 2015-07-09 17:07

@吴瑞祥: 还是不太懂, 我是新人, 自己研究了一下午了。

吴老师能劳驾您帮忙写一段完整的code吗?  多谢。

支持(0) 反对(0) GEEKc | 园豆:39 (初学一级) | 2015-07-09 17:08

@GEEKc: 不能..什么语言什么环境.都不知道.

反正就是就用正则将"[<].*?[>]"替换为空

支持(0) 反对(0) 吴瑞祥 | 园豆:29449 (高人七级) | 2015-07-09 17:14

@吴瑞祥: 就是传统的js+html,  环境什么都行, Notepad++即可

多谢吴老师了。

支持(0) 反对(0) GEEKc | 园豆:39 (初学一级) | 2015-07-09 17:24
0

var sourceText ='<span style="color: #0000ff; font-weight: bold;">there</span>';

sourceText =sourceText .replace(/<span[^>]*>/g,"").replace(/<\/span>/g,"");

console.log(sourceText );

收获园豆:20
司幸 | 园豆:319 (菜鸟二级) | 2015-07-09 17:40

 我并不是要取出there, 以sourceText为情况2和需要处理的字符串是there are always举例, 需要得到的结果是:Where there is great love, <span style="background-color:yellow;font-we;ight:inherit;"><span style="color: #0000ff; font-weight: bold;">there</span> <span style="color: #0000ff; font-weight: bold;">

are</span> always</span> miracles.

支持(0) 反对(0) GEEKc | 园豆:39 (初学一级) | 2015-07-10 09:50

@GEEKc: 你不就是因为有<span>匹配不到there are always么。现在直接对处理后的字符串执行你之前执行的替换不就行了

支持(0) 反对(0) 司幸 | 园豆:319 (菜鸟二级) | 2015-07-10 09:55

@司幸: 因为sourceText在这之前可能就已经有span标签存在字符串里面了,如果把这些处理掉的话,是能匹配到there are always,也能追加进去,但是之前的标签就没了。这里需要保存原来的标签。

支持(0) 反对(0) GEEKc | 园豆:39 (初学一级) | 2015-07-10 10:00

@GEEKc: 了解了,你的意思是 <span><span><span>there</span></span> are</span>aways 这种情况也是会出现的吗。替换后<span><span><span><span>there</span></span> are</span>aways </span>?

支持(0) 反对(0) 司幸 | 园豆:319 (菜鸟二级) | 2015-07-10 10:22

@司幸: 对,就是可能的情况是

<span style="color: #0000ff; font-weight: bold;">there</span> <span style="color: #0000ff; font-weight: bold;">
are</span> always 替换成 <span style="background-color:yellow;font-we;ight:inherit;"><span style="color: #0000ff; font-weight: bold;">there</span> <span style="color: #0000ff; font-weight: bold;">are</span> always</span>
也可能是there <span style="color: #0000ff; font-weight: bold;">are</span> always 替换成 <span style="background-color:yellow;font-we;ight:inherit;">there <span style="color: #0000ff; font-weight: bold;">are</span> always</span>

还可能是there are always 替换成 <span style="background-color:yellow;font-we;ight:inherit;">there are always</span>
也就是每个单词都有可能会被<span style="color: #0000ff; font-weight: bold;"></span>这么一组span标签所标注。我们需要从原始字符串中找到一串指定字符串加上<span style="background-color:yellow;font-we;ight:inherit;"></span>

多谢司幸老师, 有劳了 :[

支持(0) 反对(0) GEEKc | 园豆:39 (初学一级) | 2015-07-10 10:31

@GEEKc: var tem  = sourceText .match(/(<span[^>]*>)*\s*there\s*(<\/span>)*\s*(<span[^>]*>)*\s*are\s*(<\/span>)*\s*(<span[^>]*>)*\s*always\s*(<\/span>])*/g);

for(tem){

sourceText=sourceText .replace(tem[i],<span>tem[i]</span>)

}

console.log(sourceText)

支持(0) 反对(0) 司幸 | 园豆:319 (菜鸟二级) | 2015-07-10 11:34

@司幸: 司幸老师,这个for循环是什么语法啊?  没有这种写法吧?

跪求完整的能运行的demo。多谢了。

支持(0) 反对(0) GEEKc | 园豆:39 (初学一级) | 2015-07-10 15:13
0

string pattern = @"(((<(\w+[^<]*?)>)|(?<=\b|\s))*there(<(/\w+|\w+[^<]*?)>|\b|\s)*are(<(/\w+|\w+[^<]*?)>|\b|\s)*always(\s*</\w+>|(?=\b|$))*)";
string sourceText = "Where there is great love, <span style=\"color: #0000ff; font-weight: bold;\">there</span> <span style=\"color: #0000ff; font-weight: bold;\">are</span> always miracles.";
string text = Regex.Replace(sourceText, pattern, "*$1*"); //把 * 换成你要的

 

收获园豆:10
Yu | 园豆:12980 (专家六级) | 2015-07-09 20:27

这是C#正则吗?  我把这个转成JS正则以后报错了。 大神,能帮忙写一个完整点的JS正则吗?

支持(0) 反对(0) GEEKc | 园豆:39 (初学一级) | 2015-07-10 09:51

@GEEKc: 

var t='<span style="color: #0000ff; font-weight: bold;">there</span> <span style="color: #0000ff; font-weight: bold;">are</span> always';
var r=/(((<(\w+[^<]*?)>)|(\b|\s))*there(<(\/\w+|\w+[^<]*?)>|\b|\s)*are(<(\/\w+|\w+[^<]*?)>|\b|\s)*always(\s*<\/\w+>|(\b|$))*)/g;
var hightlight='<span style="background-color:yellow;font-we;ight:inherit;">';
document.write(t.replace(r,hightlight+"$1"+"</span>"));

支持(0) 反对(0) Yu | 园豆:12980 (专家六级) | 2015-07-10 12:41

@Yu: 还是不行啊, 运行的时候匹配不到情况2啊

支持(0) 反对(0) GEEKc | 园豆:39 (初学一级) | 2015-07-10 15:14

@GEEKc: 那你测试有问题

支持(0) 反对(0) Yu | 园豆:12980 (专家六级) | 2015-07-10 15:46

@GEEKc: 以下是通过的

var t='Where there is great love, <span style="color: #0000ff; font-weight: bold;">there</span> <span style="color: #0000ff; font-weight: bold;">are</span> always miracles.';
var r=/(((<(\w+[^<]*?)>)|(\b|\s))*there(<(\/\w+|\w+[^<]*?)>|\b|\s)*are(<(\/\w+|\w+[^<]*?)>|\b|\s)*always(\s*<\/\w+>|(\b|$))*)/g;
var hightlight='<span style="background-color:yellow;font-we;ight:inherit;">';
document.write(t.replace(r,hightlight+"$1"+"</span>"));
支持(0) 反对(0) Yu | 园豆:12980 (专家六级) | 2015-07-10 15:48

@Yu: 这个background-color:yellow;font-we;ight:inherit;是写错了还是正则的语法啊?

算了, 不纠结了, 答案已经有了。 谢谢Yu老师悉心指导。

支持(0) 反对(0) GEEKc | 园豆:39 (初学一级) | 2015-07-10 16:00

@GEEKc: 写错的,改成 background-color:yellow;font-weight:inherit;

支持(0) 反对(0) Yu | 园豆:12980 (专家六级) | 2015-07-10 17:09
0

话说,你的需求应该是指定关键字高亮吧?直接用正则替换不行么?

收获园豆:10
幻天芒 | 园豆:37175 (高人七级) | 2015-07-10 10:18

对, 就是关键字(可能是一个句子也可能只是一个单词)高亮加黄色背景。但是原始的字符串中可能某些单词已经被做其他高亮处理(加粗加蓝色), 是需要用正则替换, 但是这个正则不会写。 

幻老师可以帮忙写一个小的demo吗? 多谢了。

支持(0) 反对(0) GEEKc | 园豆:39 (初学一级) | 2015-07-10 10:33

@GEEKc: 需要将原本的高亮干掉? 如果不需要的话,直接取出result = innerHTML.replace(/xxx/gi, '高亮之后的html代码');  然后再赋值回去。。

支持(0) 反对(0) 幻天芒 | 园豆:37175 (高人七级) | 2015-07-10 10:59

@幻天芒: 嗯,就像头头老师说的那样,多谢幻老师了,在线等!

支持(0) 反对(0) GEEKc | 园豆:39 (初学一级) | 2015-07-10 11:07

@请叫我头头哥: 多谢头头哥老师

支持(0) 反对(0) GEEKc | 园豆:39 (初学一级) | 2015-07-10 11:08

@GEEKc: 我用正则是玩不转这个的,那就只能一层层的去解析,然后分别处理了。我的方法太复杂了,先尝试下他们提供的正则匹配嘛吧。。

支持(0) 反对(0) 幻天芒 | 园豆:37175 (高人七级) | 2015-07-10 12:04

@请叫我头头哥: 头头哥,我正则太弱,用正则搞不定。。。

支持(0) 反对(0) 幻天芒 | 园豆:37175 (高人七级) | 2015-07-10 12:31

@幻天芒: 老幻, 你也太谦虚了吧?  我看是你不愿意弄而已。 话说这个正则难倒是不难, 但是确实挺麻烦的。

支持(0) 反对(0) 请叫我头头哥 | 园豆:9382 (大侠五级) | 2015-07-10 15:27

@请叫我头头哥: 我看着大片的正则,我就头大。。

支持(0) 反对(0) 幻天芒 | 园豆:37175 (高人七级) | 2015-07-10 16:28
0

var words = ["there", "are", "always"];
var txt = 'Where there is great love, <span style="color: #0000ff; font-weight: bold;">there</span> \tare always miracles.'
if (new RegExp("((<.*?>)?" + words.join('(</.*?>)?\t? ?(<.*?>)?') + "(</.*?>)?)").test(txt)) txt = txt.replace(RegExp.$1, '<span style="background-color:yellow;font-we;ight:inherit;">' + RegExp.$1 + '</span>');

收获园豆:20
长蘑菇星人 | 园豆:1832 (小虾三级) | 2015-07-10 11:38

大神, 你这得到的结构是Where there is great love, <span style="background-color:yellow;><span style="color: #0000ff; font-weight: bold;">there</span> are always</span> miracles.   只有there被高亮了。 我的需求是words 数组里的都得高亮。、

多谢了。 能帮忙继续写写demo吗?

支持(0) 反对(0) GEEKc | 园豆:39 (初学一级) | 2015-07-10 15:16

@GEEKc: var words = ["there", "are", "always"];
var txt = 'Where there is great love, <span style="color: #0000ff; font-weight: bold;">there</span> are always miracles.'
if (new RegExp("((<.*?>)?" + words.join('(</.*?>)? ?(<.*?>)?') + "(</.*?>)?)").test(txt)) txt = txt.replace(RegExp.$1, '<span style="background-color:yellow;font-we;ight:inherit;">' + RegExp.$1 + '</span>');

写错了 (。。。

支持(0) 反对(0) 长蘑菇星人 | 园豆:1832 (小虾三级) | 2015-07-10 15:35

@长蘑菇星人: 这个的确也是可以匹配出来的,但是不太符合我的这个需求。 不过还是谢谢大神。

支持(0) 反对(0) GEEKc | 园豆:39 (初学一级) | 2015-07-10 15:59
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册