Replace word with another one using javascript?

Question

I'm using Google map to get distance and time between two locations.

this works fine...

however, I would like to replace some texts/words that has been spit out on my page from google map api with my own texts/words.

for example: I would like to replace the about with ETA:

This is my javascript code to replace the word:

<script>

function myFunction() {
    var str = document.getElementsByClassName("adp-summary").innerHTML; 
    var res = str.replace("about", "ETA: ");
    document.getElementsByClassName("adp-summary").innerHTML = res;
}
</script>

but unfortunately this doesn't do anything and it doesn't replace the word about with ETA:.

Here is my entire code:

http://jsfiddle.net/dvw37ktu/1/

Could someone please advise on this issue?

Thanks in advance.

`document.getElementsByClassName("adp-summary").innerHTML` fails because the return value of `getElementsByClassName()` is a node list, not a single element. — Frédéric Hamidi, Jan 05 '15 at 13:51
I would highly recommend using jQuery. Makes things a lot easier. http://api.jquery.com/replacewith/ — Jim Moody, Jan 05 '15 at 13:52
@william, I didn't say that. I was only pointing out the error in your current code. Of course, you can iterate over a node list, and process each element in turn. — Frédéric Hamidi, Jan 05 '15 at 13:55
When I fix your fiddle (include the Google Maps Javascript API v3), I get this javascript error: `Uncaught TypeError: Cannot read property 'replace' of undefined` — geocodezip, Jan 05 '15 at 14:32

Flynn · Accepted Answer · 2015-01-05T14:12:00.007

1

As mentioned in the comments, document.getElementsByClassName is returning a HTMLCollection that matches your selector, which is why you can't set the .innerHTML. This can be fixed by dealing with the collection, say, by looping over it:

var adpSummary = document.getElementsByClassName("adp-summary");
for (var i = 0; i < adpSummary.length; i++) {
  // Do string replacement on adpSummary[i]
  adpSummary[i].innerHTML = adpSummary[i].innerHTML.replace(new RegExp('about', 'gm'), 'ETA: ')
}

edited Jan 05 '15 at 14:12

answered Jan 05 '15 at 14:02

Flynn

5,903
7
38
55

What doesn't work? Looping over adpSummary? The string replacement? – Flynn Jan 05 '15 at 14:08
the string replacement. – william Jan 05 '15 at 14:09
worked like a charm.... now its time to learn why it worked :).. you're the man... – william Jan 05 '15 at 14:20
1

I'd recommend learning about regular expressions. See the [MDN article on javascript regex](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) – Flynn Jan 05 '15 at 14:22

score 0 · Answer 2 · edited May 23 '17 at 11:50

0

if only using native js, replace only replaces the first instance of the string.

you can either loop while index check:

while(str.indexOf("about") > -1)
{
//do replace here 
}

or a better option is to use a regex.

see more here: Why does javascript replace only first instance when using replace?

edited May 23 '17 at 11:50

Community

1
1

answered Jan 05 '15 at 13:56

Buck3y3

136
8

that's not my code in your jsfiddle though! and I don't think it has anything to do with my code. – william Jan 05 '15 at 14:08
sorry I'm not going to write your code for you. I just showed you why your replace will not function properly and 1 way to do it properly. – Buck3y3 Jan 05 '15 at 14:15
no one asked you to "write my code for me".... I've already written my own code and its working perfectly fine in terms of displaying the information etc... But if you are trying to answer a question on STO, you would need to use the given code in the question and based your answer around that code and not just write a mumble, jumble code and asume you've answered the question. – william Jan 05 '15 at 14:18
and good luck getting more than 28 reputations with attitude like that. – william Jan 05 '15 at 14:21

Replace word with another one using javascript?

2 Answers2