Search code examples
javascriptphphtmlinnerhtmlphp-5.5

Change all text on page with innerHTML


I want to change all text on a page, that got value "Yes".How can I change all "Yes"-value on the page?

I just want that if the value of the text = "Yes", than this must be replaced with <span class='ic ic-normal ic-icon-yes'></span>

This is my current code:

<?php
    $_helper = $this->helper('catalog/output');
    $_product = $this->getProduct()
?>
<?php if($_additionalgroup = $this->getAdditionalData()): ?>
<section id="additional">
<div class="box-collateral box-additional">
    <h2><?php echo $this->__('Additional Information') ?></h2>

    <?php $i=0; foreach ($_additionalgroup as $_additional): $i++; ?>
        <h3><?php echo $this->__( $_additional['title'] )?></h3>
        <table class="data-table" id="product-attribute-specs-table-<?php echo $i?>">
            <col width="25%" />
            <col />
            <tbody>
            <?php foreach ($_additional['items'] as $_data): ?>
             <?php $_attribute = $_product->getResource()->getAttribute($_data['code']);
    if (!is_null($_product->getData($_attribute->getAttributeCode())) && ((string)$_attribute->getFrontend()->getValue($_product) != '')) { ?>
                <tr>
                    <th class="label"><?php echo $this->htmlEscape($this->__($_data['label'])) ?></th>
                    <td class="data"><?php echo $_helper->productAttribute($_product, $_data['value'], $_data['code']) ?></td>
                </tr>
            <?php } ?>
            <?php endforeach; ?>
            </tbody>
        </table>
        <script type="text/javascript">decorateTable('product-attribute-specs-table-<?php echo $i?>')</script>
    <?php endforeach; ?>

</div>
</section>
<?php endif;?>

Text inside td-class is loaded dynamically. Elements does not have any unique ID.

How can I achieve this?


Solution

  • If I correct understand your problem, you want to change all elements containing a text equal to "Yes" with some pattern. Try this script to achieve that:

    $('*').filter(function() {
        return $(this).text()=='Yes'
    }).each(function() {
        this.textContent = "<span class='ic ic-normal ic-icon-yes'></span>"
    }); 
    

    Or in pure Javascript:

    var allElements = document.body.getElementsByTagName("*");
    for(var i = 0; i < allElements.length; i++) {
        var text = allElements[i].innerHTML;
        if (text == 'Yes') {
            allElements[i].innerHTML = "<span class='ic ic-normal ic-icon-yes'></span>";
        }
    }