0

What is the most scalable way to do large-scale search-replace operations in JavaScript?

I have an use case where I need to dynamically highlight 100+ words but it will scale bigger (e.g. possibly 1000+) within specific DIV fields of a large mostly text-only pages. Essentially adding custom CSS/HTML mouse-over highlighting to all ~100+ specific words. From a dynamically-changing list of potentially user-supplied words. On long pieces of user-submitted texts (aka forum).

I can do it either client-side (JS) or services-side (PHP), but I'm currently experimenting with client-side to keep web server load low.

RELATED: How to search for multiple texts in a string, using java script?

Except it's a search-replace performance scalability consideration for me.

In extreme scalability cases, I may eventually need to scan for 1000+ separate words on 100K of text (totalled, within between 10 to 100 div tags). At any time, only some (e.g. just 10 or 20% match) but there may be a search list of 1000+ words.

  1. Use a loop to search for each keyword one at a time, and apply CSS iteratively.
  2. Programmatically generate a complex regular expression that does it all in one pass.
  3. Another technique

Which historically perform faster overall -- given the widest range of browsers on the widest range of platforms?

Community
  • 1
  • 1
Mark Rejhon
  • 869
  • 7
  • 14
  • 4
    Do you actually *have* the performance problem? If not, just implement it and then start profiling etc if it's slow. I doubt it; 100 searches isn't much for any modern platform. – Pointy Mar 03 '17 at 17:18
  • 2
    What tests have you done? What results did you get? – StudioTime Mar 03 '17 at 17:18
  • Today, it's 100, but it's a scalability problem (aka future-proofing). I fear I may be handling 1000+ scans in hundred-kilobyte texts. So this is my rationale to tap collective knowledge before I begin hours of performance profiling four or five browser platforms. – Mark Rejhon Mar 03 '17 at 17:22
  • 2
    [jsPerf - JavaScript performance playground](https://jsperf.com) – Andreas Mar 03 '17 at 17:23
  • Thanks, familiar with it. That'll be one of my tools. – Mark Rejhon Mar 03 '17 at 17:26
  • Edited title of question to highlight the /scalability/ consideration of my question. – Mark Rejhon Mar 03 '17 at 17:33
  • _"Which historically perform faster in most browsers in Javascript?"_ Not sure what Question is? An at-large survey? What benchmarks have you performed? No problem, and no problem which could be solved, is actually presented at OP. – guest271314 Mar 03 '17 at 17:33
  • It's no problem on an fast i7, but it creates a lot of performance issues on slower Android devices. It's hard to possibly test 100 devices and multiple browser engines -- without tapping into collective knowledge about scalability considerations. I'm really hoping there's collective knowledge about scalability of large-scale search-replace operations. – Mark Rejhon Mar 03 '17 at 17:34
  • What do you mean by "slower Android devices"? That is not a narrow group to survey, given N-billion "Andriod devices" are possibly in service globally. No actual problem is presented at Question. First provide the performance benchmarks that you have done yourself, with the devices that you have access to; which should provide you with the answer you are seeking. Presently, Question appears to ask viewers to find devices at-large and perform the tests for you. – guest271314 Mar 03 '17 at 17:37
  • To rephrase, generically: "What is the most scalable way to do large-scale search-replace operations in JavaScript?" – Mark Rejhon Mar 03 '17 at 17:39
  • _"most"_ That is the same premise. You need to do something before something else can be measured against what you have done. You can get the results you are asking others to do for you, yourself. At least perform a test on the current working implementation and one other the adjacent prospective implementation which you mention at OP, to have a base case to compare other possible approaches to. The measurement of time, is generally, not speculative. – guest271314 Mar 03 '17 at 17:40
  • engine is important too. is it nodejs? – huseyin tugrul buyukisik Mar 04 '17 at 23:45

1 Answers1

1

Look at this topic: How to replace all occurrences of a string in JavaScript?

It's not empirical but I think the best option (of those two) is to fire a Regex replacement in the text replacing the term by <span>term</span> and in the css you make the highlight in the span.

Why I think this is the best option of those two: less operations with arrays, less memory manangement for the browser. The Regex object will be instantiated only once and will perform all the text replacements.

Hope it helps.

Community
  • 1
  • 1
taiar
  • 552
  • 6
  • 22
  • _"It's not empirical but I think the best option (of those two)"_ Can you define "best"? Why do you "think" this? What is the actual problem presented at Question? – guest271314 Mar 03 '17 at 17:29