0

I want to replace the "word" that is outside "span", and keep the other that is inside "span". By now, the following code works when both are following "mark>" and followed by "span". But I want to go further, following "mark>" OR being followed by "span", any one of the two condition should cause replacing action.

var replaceString = "newWord";
var htmlString = "This <span style='color:red' title='mark'>normal word</span> need no change. This word is to be replaced. <span>Another word</span> need no change.";

var reg=new RegExp("(?!mark>)"+replaceString+"(?!<\/span>)","gi");
var bb=htmlString.replace(reg,replaceString);    
alert(bb) 

// Final result should be "This <span style='color:red' title='mark'>normal word</span> need no change. This newWord is to be replaced. <span>Another word</span> need no change.";

UPDATE: using title as mark. adding starting tag span

UPDATE: Follow the suggestion below, I'm trying to solve the problem in anohter way, see here: js regex: replace words not in a span tag

Community
  • 1
  • 1
jdleung
  • 1,088
  • 2
  • 10
  • 26
  • Your HTML is invalid. The second `` has no starting tag. Also, what is `mark` supposed to do? –  Oct 12 '15 at 09:07
  • I add "mark" to mark this word had added "span", need no change again. I remove the starting tag only to describing what I want. It exists when run on real codes. Thanks. – jdleung Oct 12 '15 at 09:16
  • I don't understand where the information that the word `"word"` is to be replaced is supposed to come from. Your first span contains "normal word", but you want to replace the word `"word"`? –  Oct 12 '15 at 09:36
  • @torazaburo, I meant "word" that is in `span` need no change, "word" may be in a sentence. – jdleung Oct 12 '15 at 09:58

2 Answers2

0

Would you be comfortable using another span tag ? By putting a class name inside it, you should be able to change the words you need to change by changing the content of every span containing that class.

Something like :

This <span style='color:red' mark>word</span> need no change. This <span class='changeMe'>word</span> is to be replaced. Another word</span> need no change.

And a jQuery script going

$('.changeMe').text("newWord")

If you still want to use Regexp, for an OR condition, you might just do it twice :

var reg=new RegExp("(?!mark>)"+replaceString,"gi");
var bb=htmlString.replace(reg,replaceString);
reg=new RegExp(replaceString+"(?!<\/span>)","gi");
bb=htmlString.replace(reg,replaceString);
Bity
  • 43
  • 1
  • 6
  • It looks simple. Can do this with js? – jdleung Oct 12 '15 at 09:38
  • Haven't use regular js in a while but var elts = Document.getElementByClass('changeMe') for(elt in elts){ //Do stuff } – Bity Oct 12 '15 at 09:39
  • yes, getElementByClass is good for knowing the class in a simple. But if it's in a large text, I need to first find out the word, and then get its class, finally replace the word. ;-( . – jdleung Oct 12 '15 at 09:54
  • Well I don't know about that, but it takes what it takes. Unfortunately pattern matching in a large file is necessarily slow. Maybe the double regex execution is better for your particular case. – Bity Oct 12 '15 at 10:12
  • I'm trying another way to get solve my problem, please take a look at the update link. – jdleung Oct 12 '15 at 11:45
0

You are looking for negative look-aheads (or Lookbehinds) which JS, unfortunately, doesn't support. Check http://www.regular-expressions.info/javascript.html

You may try the following Regex:

var reg = new RegExp('[^(mark>)]word[^(</span>)]', "gi")
htmlString.replace(reg, " newWord "); //Check the spaces

I would rather suggest using JS to get DOM elements and replace text iterative-lly (not sure if it's a word, even a jargon).

HTH

Harsh Gupta
  • 4,348
  • 2
  • 25
  • 30
  • Sorry to hear that. I added a title inside `span`, can detect if the word is inside a `span` with title='mark'? How to do that? Thx. – jdleung Oct 12 '15 at 09:41