Using Jquery to replace text inside a div

Question

I have something that looks like

<div id="ABCLinks"> : <span dir="ltr"><a href="www.google.com" title="GOOGLE">Google</a></span>

I am trying to replace only the text ":" with "Websites:" Without adding any source tags around it ().

This is what I have tried with no effect:

<script type="text/javascript">
    $(document).ready(function() {
        $("#ABCLinks").text(function () {
            return $(this).text().replace(":", "Websites:"); 
        });
    }); 
</script>

I am getting this html output (I am using a php skin to automatically embed my jquery script, it works for other jquery scripts)

<script type="text/javascript">$(document).ready(function() {
&#8203;$("#ABCLinks").text(function () {
return $(this).text().replace(":", "Websites:"); });&#8203;&#8203;&#8203;&#8203;&#8203;
    }); 
</script>

score 4 · Answer 1 · answered Aug 02 '13 at 19:20

4

$(document).ready(function() {
    $("#ABCLinks").text(function () {
        return $(this).text().replace(":", "Websites:"); 
    });
});

You gave your div an ID, but tried to call it by class in jQuery. Classes are referenced using a period like '.ABCLinks', while IDs are referenced using a hashtag like '#ABClinks'

Here is a fiddle: http://jsfiddle.net/ERe9z/

answered Aug 02 '13 at 19:20

+1 ..You can just use the txt passed in as second argument. Why do you want to wrap a jQuery object inside it `text(function (_, txt) { return txt.replace(":", "Websites:"); });` – Sushanth -- Aug 02 '13 at 19:24
Thank you AnthonyMasi, your solution works when i go to jsfiddle.net, BUT I am implementing this code in a php skin that will automatically place the script into my html files. I have used jquery before with this skin and i have had no problem. But for some reason my html source is getting screwed up and it won't accomplish the replace. I updated my post so you can see the weird output source I am getting.... – user2597457 Aug 02 '13 at 19:35
#8203; is the unicode "zero width space" character.. is it affecting your script? http://www.fileformat.info/info/unicode/char/200b/index.htm – Aug 02 '13 at 19:49
Yes it is affecting my script, it won't implement the replace i want – user2597457 Aug 02 '13 at 19:49
Here is the fiddle: http://jsfiddle.net/ERe9z/ – user2597457 Aug 02 '13 at 19:53
Look at the answer below! You don't need to do the replace at all, you can simply set the html of the div to "Websites:" -- http://jsfiddle.net/ERe9z/5/ – zajd Aug 02 '13 at 19:58
Yea but it removes Google and that link isn't the same for every page, so I can't just also include the link – user2597457 Aug 02 '13 at 20:00
Added below, but you can simply append the "Website" on the front of the
like so - http://jsfiddle.net/ERe9z/7/
– zajd Aug 02 '13 at 20:03

zajd · Accepted Answer · 2013-08-02T20:04:21.953

3

Two issues,

Your selector is incorrect

$("#ABCLinks") is for referencing the ID field.
The HTML function would be a lot better for this

http://api.jquery.com/html/#html-htmlString

.html( htmlString )

htmlString

Type: htmlString

A string of HTML to set as the content of each matched element.

<script type="text/javascript"> $(document).ready(function() { $("#ABCLinks").html("Websites:"); }); </script>

edit. And the fiddle for your particular circumstance: http://jsfiddle.net/ERe9z/7/

edited Aug 02 '13 at 20:04

answered Aug 02 '13 at 19:19

zajd

761
1
5
18

this kinda works. Except it removes: Google – user2597457 Aug 02 '13 at 19:59
http://jsfiddle.net/ERe9z/7/ – zajd Aug 02 '13 at 20:02
Im going to give you a kiss! Thank you so much! Works perfect!!!! That ones space between Websites and the ":" is making me a little OCD but i think i can live with it ;) – user2597457 Aug 02 '13 at 20:13
No problem! Don't forget to mark this solution as having answered your question! You also can probably get rid of that space by removing it from the start of the HTML - `
: Google`
– zajd Aug 02 '13 at 20:15
O yea sorry i was so excited I forgot to mark it as a solution ;)Unfortunately I cannot touch the html source to edit it because it is being generated from something else. That is why i am using a skin to embed these jquery scripts to edit all that random text i don't like! But i will live with it!!! Thanks again! – user2597457 Aug 02 '13 at 20:18

Using Jquery to replace text inside a div

2 Answers2