Custom RegEx needed

Question

Using javascript, I need to parse the HTML of a page and replace all occurrences of ABC with ABC that occur within a content block such as <p>ABC Company lorem ipsum</p> would be changed to <p><span class="abc">ABC</span> Company lorem ipsum</p> but mailto:[email protected] would stay the same.

So pretty much replace ABC anywhere that is preceded by a space or quote, but obviously I would like to make it a little more generic. Perhaps the expression would say when it is not preceded/followed by [a-zA-z].

What I have so far:

<script type="text/javascript">
    $(document).ready(function() {
        $('body').find('div').each(function(i, v) {
            h = $(v).html();

            if (h.indexOf('abc') > 0) {
                h = h.replace('abc', '<span class="abc">abc</span>');
                $(v).html(h);
            }
        });
    });
</script>

Just in case it wasn't obvious, doing the replace this way will cause all stored data and bound events on elments inside of those divs to be lost. — user400654
– user400654, Commented May 20, 2013 at 20:44
ah, I figured there was something horribly wrong with this implementation since it took 5 minutes to come up. — Don Boots
– Don Boots, Commented May 20, 2013 at 20:50
This should get you part of the way there: jsfiddle.net/hrEyC actually going to have to navigate from the node to it's closest parent element and modify that element's text content. — user400654
– user400654, Commented May 20, 2013 at 20:57
If I'm not mistaken, your code will cause <div><div>abc</div></div> to become <div><div><span class="<span class="abc">abc</span>">abc</span></div></div> — Niet the Dark Absol
– Niet the Dark Absol, Commented May 20, 2013 at 21:14

user400654 · Accepted Answer · 2013-05-20 20:59:49Z

1

I suggest going about it a different way that preserves data and events on the elements and doesn't interfere with attributes on said elements.

 $("body div").find("*").addBack().contents().filter(function(){
     return this.nodeType === 3;
 }).each(function() {
     $(this).parent().html(this.nodeValue.replace(/abc/g, '<span  class="abc">abc</span>'));
 })

http://jsfiddle.net/hrEyC/1/

Note, requires jQuery 1.9+ due to use of .addBack(), for older versions replace with .andSelf()

answered May 20, 2013 at 20:59

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Don Boots Over a year ago

That replace logic is much more solid, but the regex replaces all. I need to exclude instances that would be in email addresses (or similar situations).

user400654 Over a year ago

Do you also want it to replace fooabcbar with foo<span>abc</span>bar? that makes it very difficult if you also want to ensure that it doesn't replace inside an email address.

Don Boots Over a year ago

If abc is surrounded by other letters, it's more than likely not getting replaced. Most situations are just <p>Blah abc</p> or <p>Blah "abc blah"</p>

beveradb · Accepted Answer · 2013-05-20 21:08:50Z

1

This is not a very efficient thing to do (loop through all div tags in the DOM and apply a regex to each one) but since I don't know what constraints you have or what situation you are using this code in, I'll just assume there's a good reason you're doing this client-side in this way.

Anyway, this regex seems to match your requirements (albeit not very well defined requirements):

h = h.replace(/([^A-Z])(ABC)([^A-Z])/gi, '$1<span style="color: red">$2</span>$3');

Fiddle here: http://jsfiddle.net/czJFG/

answered May 20, 2013 at 21:08

beveradb

1286 bronze badges

Collectives™ on Stack Overflow

Custom RegEx needed

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related