使用 innerHTML 更改页面上的所有文本

Question

我想更改页面上的所有文本，其值为 "Yes"。如何更改页面上的所有 "Yes" 值？

我只是想如果文本的值 = "Yes"，则必须将其替换为 <span class='ic ic-normal ic-icon-yes'></span>

这是我当前的代码：

<?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;?>

td-class 中的文本是动态加载的。元素没有任何唯一 ID。

我怎样才能做到这一点？

Answer 1

如果我正确理解你的问题，你想用某种模式更改所有包含等于 "Yes" 的文本的元素。试试这个脚本来实现：

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

或纯 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>";
    }
}

Answer 2

如果我没看错的话，您正在定位一个带有 ID 的元素，因此应该只有一个项目被更改。如果您的目标是 class 选择的一组元素。查看 this fiddle

  var yes_divs = document.getElementsByClassName('yes');
    for (var i = 0; i < yes_divs.length; i++) {
        yes_divs[i].innerHTML = 'yes';
    }

Answer 3

如果您的代码基于某个操作动态加载，那么您可以尝试像这样每秒执行脚本：

window.setInterval(function(){
  document.getElementById("Yes").innerHTML = "<span class='ic ic-normal ic-icon-ja'></span>";
}, 1000);

已测试：https://jsfiddle.net/dccom5Lv/

Answer 4

要更改 <body> 中 标签的每个 innerHTML 中的文本 "Yes" <body> <span class='ic ic-normal ic-icon-yes'></span>:

var body = document.getElementsByTagName("body");
var children = body[0].children;
for(var i = 0; i < children.length; i += 1) {
    var regex = new RegExp("Yes", 'gi');
    var newString = children[i].innerHTML.replace(regex, "<span class='ic ic-normal ic-icon-yes'></span>");
    children[i].innerHTML = newString;
}

Demo

使用 innerHTML 更改页面上的所有文本

Change all text on page with innerHTML

html

javascript

php

innerhtml

php-5.5