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

Question

原始字符串 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...

Answer 1

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

Answer 2

大神， 你这得到的结构是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吗？

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

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

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

Answer 11

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

Answer 12

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

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

Answer 13

@GEEKc: 那你测试有问题

Answer 14

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

Answer 15

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

Answer 16

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

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

Answer 17

@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)

Answer 18

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

<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>

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

Answer 19

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

Answer 20

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