I would like to improve a search replace function in Javascript/jQuery

Question

var target   = $(".target-text"),
    relation = ['spun gold', 'gold', 'apple'],
    len      = relation;

for (var i=0; i<len; i++) {

    var e = relation[i],
        re = new RegExp(e,"ig");

    if (e.length > 0) {
        target.html( target.html().replace(re, "<span class='hit'>$&</span>") );
    }

};

The searched characters are surrounded with a tag.

At this time, There is a problem.
The problem is that a result changes in the turn to search.

like a ['spun gold', 'gold', 'apple'] is ok,
but like a ['gold', 'spun gold', 'apple'] is ng.

If gold => gold is performed first,
spun gold => spun gold will go wrong.
(Since gold has changed to gold by the 1st time.)

Is there better way?

EDIT:

As conditions, search is not only English.

Would it be ok if you just reorder relation-array?

TCFDS
– TCFDS

2012-12-02 06:44:56 +00:00
Commented Dec 2, 2012 at 6:44 — TCFDS
– TCFDS, Commented Dec 2, 2012 at 6:44

Community · Accepted Answer · 2017-05-23 12:18:44Z

3

I think I see the problem: one replacement is messing up a previous one because they share a common substring.

Perform a single replacement, by combining the terms in relation into one big "or" in the regexp:

var target   = $('.target-text'),
    relation = ['spun gold', 'gold', 'apple'],
    re = new RegExp(relation.join('|'), 'ig');

target.html(function (_, oldHtml) {
    return oldHtml.replace(re, "<span class='hit'>$&</span>");
});

N.B. you may need to quote the array elements before .join('|')ing them to prevent special characters from breaking the regexp. (Example: relation = ['foo', 'bar?']). Here's how: Escape string for use in Javascript regex

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Dec 2, 2012 at 6:45

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

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

2 Comments

R.Atim Over a year ago

Thank you for the advice. I tried. The result of ['tress', 'enchantress'] is enchantress. I want to it become like enchantress as my image. Is it possible?

R.Atim Over a year ago

If a pre-code is executed after this your code, it will become as my image. Thank you. (but is there wastefulness?)

Collectives™ on Stack Overflow

I would like to improve a search replace function in Javascript/jQuery

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related