How to replace text inside IDless with javascript?

Question

I have some text inside <span></span> tags and I want to change that text to something else when page is loaded.

So lets say default text is 'Story' (outputted by some CMS system and I can't edit it). So when page is loaded, .js detects that 'Story' word and replaces it with 'View This Story'.

Is that possible somehow?

Cheers

Update: I did search before asking and none of those methods I found works. Like I said the text is outputted by CMS and it gives wrong title, the title itself cannot be edited via CMS because it is used for other terms and tagging which is correct, so I was looking for js workaround to rename it on page load.

And span has no ID and I cannot give it any ID, because like I said it works as designed by CMS.

<div class="views-row views-row-1 views-row-odd views-row-first active">
  <div class="views-field views-field-name">
    <span class="field-content">Story</span>
  </div>
</div>
<div class="views-row views-row-2 views-row-even">
  <div class="views-field views-field-name">
   <span class="field-content">Second Story</span>
  </div>
</div>

As you can see spans do not have IDs, but repeating classes only.

Can you give a sample of your markup? What have you attempted so far? — Andrew Whitaker, Oct 01 '13 at 16:29
This is definitely a duplicate. Please do some research before you ask questions. — Overcode, Oct 01 '13 at 16:31
possible duplicate of [How do I change the text of a span element in javascript](http://stackoverflow.com/questions/1358810/how-do-i-change-the-text-of-a-span-element-in-javascript) — Ram, Oct 01 '13 at 16:34
if you searched before asking, show what you've tried! Questions get better answers when they are backed by a code sample. — Christophe, Oct 01 '13 at 16:38
Sorry, but I didn't find any answer for my situation. What's with the downvoting? — user13176, Oct 01 '13 at 16:52
@user13176 Your answer is at the bottom of the updated answer from `MelanciaUK` (currently at the top when sorted by votes) — MDEV, Oct 01 '13 at 16:57
I also left a comment there. It works only for one span. I am newbie to JS, sorry. — user13176, Oct 01 '13 at 17:01

emerson.marini · Accepted Answer · 2013-10-01T17:54:19.137

2

UPDATED as per OP request

You can replace any text within spans. You could even use regular expressions to make it more flexible, but let's leave this for now:

Native Javascript

var lookupSpanAndReplace = function(textFrom, textTo) {
   var spans = document.getElementsByTagName('span');

   for (i=0; i<spans.length; i++) 
      if (spans[i].innerHTML.indexOf(textFrom) >= 0)
          spans[i].innerHTML = mySpan.innerHTML.replace(textFrom, textTo);
}

lookupSpanAndReplace("Story", "My New Text");

jQuery

var lookupSpanAndReplace = function(textFrom, textTo) {
    $('span:contains(' + textFrom + ')').each(function(index, element) { 
        $(element).text($(element).text().replace(textFrom, textTo));
    });
}

lookupSpanAndReplace("Story", "My New Text");

edited Oct 01 '13 at 17:54

answered Oct 01 '13 at 16:29

emerson.marini

9,331
2
29
46

`span#mySpanId` is a bad selector - the `span` is redundant. It should just be `#mySpanId` – MDEV Oct 01 '13 at 16:32
Fixed. And I was wrongly assuming the OP wanted to replace the whole text. Now it's taking into consideration the string wanted to be replaced. – emerson.marini Oct 01 '13 at 16:33
@SmokeyPHP Not strictly true. What if the page were being generated and the element with ID `SpanId` could be something else? (Okay, it wouldn't be that ID, but you get my drift.) – Reinstate Monica Cellio Oct 01 '13 at 16:34
@Archer There should never be more than one element with the same ID, therefore the tag name is completely redundant. If this isn't true on a page, it has been developed wrong - simple as. – MDEV Oct 01 '13 at 16:35
@SmokeyPHP I know that there shouldn't be more than 1 element with any given ID, but I'm pointing out that there is a legitimate use for `type#ID`. What if the page were generated and the element could be any number of things, but the ID would always be the same? There would only be 1 of them, so that's all good. Say you wanted to style those element types differently - how would you do that? You can't use ID since it could be any type! You use `type#ID`. It's not common, but it is a legitimate use for what you said shouldn't be done :) – Reinstate Monica Cellio Oct 01 '13 at 16:38
@Archer Right I see what you mean now, but why on earth a system would generate different elements with the same ID is simply baffling. Another bad project design right there. There should never be a need for `tag#id` - if that situation is unavoidable give the element a class depending on use, or use unique ids and a merged css selector e.g. `#infospan,#infodiv` – MDEV Oct 01 '13 at 16:41
@SmokeyPHP I agree it's not usual and does sound terrible, but say you had a table and one of the columns was a mixture of inputs and static text. It would be much easier to refer to the elements by ID, but you'd obviously style them differently. Also you shouldn't be using classes like IDs, as IDs uniquely identify an element without parsing everything else to find it. I believe there are legitimate use cases out there - just not many. – Reinstate Monica Cellio Oct 01 '13 at 16:46
@Archer Let's just agree to disagree - I just can't think of any instance where the situation would be unavoidable. Let's leave poor MelanciaUK's comment section alone. – MDEV Oct 01 '13 at 16:57
@SmokeyPHP Absolutely :) – Reinstate Monica Cellio Oct 01 '13 at 16:59
The Native Javascript without ID tags works fine but only for the first span text. How do I replace the rest of the span texts in the same page with different texts? – user13176 Oct 01 '13 at 16:59
With a little bit of effort, you'd find out. I've updated the answer anyway. – emerson.marini Oct 01 '13 at 17:49

score 1 · Answer 2 · answered Oct 01 '13 at 16:29

1

Try

$('#spanID').text("View This Story");

or if you want to replace a part of text

$('#spanID').text(function () {
    return this.innerHTML.replace('Story', 'View This Story');
});

answered Oct 01 '13 at 16:29

Tushar Gupta - curioustushar

58,085
24
103
107

1

Can I ask why the anonymous function? – Andrew Grothe Oct 01 '13 at 16:31
@agrothe if user want to replace a part of text. – Tushar Gupta - curioustushar Oct 01 '13 at 16:32
@agrothe In order to do a replace on the text value. – Reinstate Monica Cellio Oct 01 '13 at 16:32
I know the text replace part, but you don't need an anonymous function to do that. Was just curious why you inserted that. Not sure who downvoted. – Andrew Grothe Oct 01 '13 at 16:35
1

@agrothe How would you do a string replace inside an element? (This is not the best example as it's totally replacing it, not just part of it.) – Reinstate Monica Cellio Oct 01 '13 at 16:36
1

I read that too quickly right after reading @DesertIvy's reply thinking it was doing the same thing. Still possible without but certainly more ugly. Good answer sir. – Andrew Grothe Oct 01 '13 at 16:50

score 0 · Answer 3 · answered Oct 01 '13 at 16:29

0

Give you span an ID and then run text([your new text]) on that node:

HTML

<span id="mySpan">Story</span>

jQuery

$('#mySpan').text("View This Story");

JSFiddle with jQuery

Or you can do it without jQuery:

document.getElementById("mySpan").innerHTML = "View This Story";

JSFiddle with plain 'ol Javascript

answered Oct 01 '13 at 16:29

Bucket

7,415
9
35
45

1

Wat? The question is also marked as jQuery so what does it matter? – Jonast92 Oct 01 '13 at 16:32
Uh... he tagged it as [jQuery]. I see no problem. – Bucket Oct 01 '13 at 16:33

Hilder Vitor Lima Pereira · Answer 4 · 2013-10-01T17:56:10.393

0

<script>
function changeSpan(){
   var spans = document.getElementsByTagName ("span");
   for (i = 0; i < spams.length; i++){
      spans[i].innerHTML = textThatYouWant ();
   }
}

</script>

<head onload="changeSpan()" >
   <tile> ... </title>
</head>
<body>
...
</body>

edited Oct 01 '13 at 17:56

answered Oct 01 '13 at 16:37

Hilder Vitor Lima Pereira

1,648
13
20

Spam, scam, etc. All bad. – emerson.marini Oct 01 '13 at 16:40
I wanted to write "span". – Hilder Vitor Lima Pereira Oct 01 '13 at 17:56

score 0 · Answer 5 · answered Oct 01 '13 at 18:17

Use the following to solve the issue.

HTML code:

<html>
<head>
    <script>
        function replace_text_span()
        {
         for(i=0;i<document.getElementsByTagName('span').length;i++)
         {
          document.getElementsByTagName('span')[i].innerHTML=document.getElementsByTagName('span')[i].innerHTML.replace("Story","View This Story");
         }
        }
    </script>
    <style>
    </style>
</head>
<body onload="replace_text_span()">
    <div class="views-row views-row-1 views-row-odd views-row-first active">
      <div class="views-field views-field-name">
        <span class="field-content">Story</span>
      </div>
    </div>
    <div class="views-row views-row-2 views-row-even">
      <div class="views-field views-field-name">
       <span class="field-content">Second Story</span>
      </div>
    </div>
</body>
</html>

How to replace text inside IDless with javascript?

5 Answers5

HTML code: