CODEWITHSUNDEEP
javascriptphpjqueryhtmldom
thismethod
thismethod

Reputation: 533

Changing text inside of an html <em> tag using jquery

I only want to change the exact word that matches inside of an tag, not all tags. Is onload the best way to do this? I tried using str_repace in php but for some reason it worked on one page but not on the page i need it to work on.

<?php 
     $var = "<em>Bicycle</em>";
     echo str_replace($var, "Bicycle", "(something different)");
    ?>

Right now I've tried a few different html dom methods and some javascript too.

  <em>Bicycle</em>

<script>
document.getElementsByTagName("em").innerHTML = "(something different)";
</script>

<?php foreach ($this->components as $id => $comp): ?>
        <tr class="row">
            <td class="col1">
                <img src="<?php echo $this->baseUrl('images/' . $comp->img_src) ?>"
                     alt="<?php echo $this->translate(sprintf($comp->translation_key, 'name')) ?>">
            </td>
            <td class="col2">
                <?php echo $this->translate(sprintf($comp->translation_key, 'name')) ?>
                <em><?php echo $this->translate(sprintf($comp->translation_key, 'description')) ?></em>
            </td>
            <td class="col3">
                <?php echo $this->formCheckbox(
                    "insurance[$id]", '1', !empty($this->order['insurance'][$id]), array('class' => 'row-checkbox')
                ) ?>
                <label for="checkbox"><?php echo $this->translate(
                        'order_additional_insurance_checkbox_label'
                    ) ?></label>
            </td>
            <td class="col4"><?php echo $this->translate(sprintf($comp->translation_key, 'dimensions_metric')) ?>
                <em><?php echo $this->translate(sprintf($comp->translation_key, 'dimensions_customary')) ?></em>
            </td>
            <td class="col5">
                <span class="rent">$<?php echo $comp->price ?></span>
            </td>
            <td class="col6">
                <div class="field-holder counter-holder row-qty" data-max-val="99">
                    <?php echo $this->formText(
                        "components[{$id}][quantity]",
                        (int)$this->order['components'][$id]['quantity'],
                        array(
                            'class' => 'required-aggregate-quantity',
                            'id'    => "component_{$id}_quantity"
                        )
                    ) ?>
                    <a class="btn-top" href="#">top</a>
                    <a class="btn-bottom" href="#">bottom</a>
                </div>
            </td>
            <td class="col7">
                <?php
                $rowCost = (int)$this->order['components'][$id]['quantity'] * $comp->price;
                ?>
                <span class="cost">$<?php echo number_format($rowCost, 2) ?></span>
            </td>
        </tr>
    <?php endforeach; ?>

Were focused on translation key 'name'.

Upvotes: 1

Views: 2395

Answers (2)

Pranav C Balan
Pranav C Balan

Reputation: 115232

You can use html() with callback function to iterate over them. For replacing text use replace() method 

$('em').html(function(i, v) {
  return v.replace("Bicycle", "(something different)");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<em>Bicycle</em>

If content is specific then, 

$('em').html(function(i, v) {
  return v === "Bicycle" ? "(something different)": v;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<em>Bicycle</em>

Upvotes: 1

Script47
Script47

Reputation: 14540

Although you specified jQuery, you can do it with JavaScript, however you're using getElementsByTagName wrong.

getElementsByTagName returns an array, you have to specify which one in the array needs to be edited. The demo should give you sufficient information.

You are not specifying which one in the array needs to be changed (document.getElementsByTagName("em").innerHTML), hence nothing is changing.

<em>Hello</em>
<em>Hello</em>
<em>Hello</em>
<em>Hello</em>
<em>Hello</em>
<em>Hello</em>

document.getElementsByTagName("em")[0].innerHTML = "GAH!";

Will return

GAH! Hello Hello Hello Hello Hello

http://jsfiddle.net/0jqvn9v2/

Upvotes: 1

Related Questions