使用 innerHTML 更改页面上的所有文本
Posted
技术标签:
【中文标题】使用 innerHTML 更改页面上的所有文本【英文标题】：Change all text on page with innerHTML 【发布时间】：2015-07-27 09:37:06 【问题描述】：我想更改页面上的所有文本，其值为“是”。如何更改页面上的所有“是”值？
我只希望如果文本的值 =“是”，则必须将其替换为 <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 />
<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。
我怎样才能做到这一点？
【问题讨论】：
您是否有多个具有相同 id 的元素？ @KAG 元素不再有任何 ID，因为它是动态加载的，不可能有唯一 ID 你的 DOM 中是否有一个 id="Yes" 的元素？您的代码会查找以这种方式设置样式的元素并替换其中的文本。 @LelioFaieta 抱歉，这不正确。我为此更改了我的问题，因为我没有任何唯一 ID 【参考方案1】：如果我正确理解了您的问题，您希望使用某种模式更改所有包含等于“是”的文本的元素。试试这个脚本来实现：
$('*').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>";
【讨论】：
谢谢，但元素没有任何 ID。因为它是动态加载的，所以它也没有任何唯一的类，只有偶数和奇数。 试试这个选择器：$('*').filter(function() return $(this).text()=='Yes').each(function() this. textContent = ''); 如果您不使用 jQuery 库，我会使用纯 JavaScript 解决方案更新我的答案。检查它是否适合您。【参考方案2】：要将<body> 中标签的每个innerHTML中的文本“是”更改为<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
【讨论】：
谢谢！但是当我在我的桌子上尝试它时，它不起作用。可能是什么问题呢？我在上面添加了我的代码。 非常感谢！如果值是 No 而不是加载此跨度 ？ 我确实遇到了页面上的所有值都更改为跨度的问题，但我确实只需要编辑表格 tbody 内的值。我该如何编辑？【参考方案3】：如果我没看错的话，你的目标是一个带有 ID 的元素，所以应该只有一个项目被改变。如果您的目标是由类选择的元素数组。查看this fiddle
var yes_divs = document.getElementsByClassName('yes');
for (var i = 0; i < yes_divs.length; i++)
yes_divs[i].innerHTML = 'yes';
【讨论】：
谢谢，但元素没有任何 ID。因为它是动态加载的，所以它也没有任何唯一的类，只有偶数和奇数。【参考方案4】：如果您的代码基于操作动态加载，那么您可以尝试每秒执行脚本，如下所示：
window.setInterval(function()
document.getElementById("Yes").innerHTML = "<span class='ic ic-normal ic-icon-ja'></span>";
, 1000);
已测试：https://jsfiddle.net/dccom5Lv/
【讨论】：
谢谢，但元素没有任何 ID。因为它是动态加载的，所以它也没有任何唯一的类，只有偶数和奇数。 @Jelle 你是什么意思文本的值=“是”？你能告诉我你想改变的 HTML 吗？以上是关于使用 innerHTML 更改页面上的所有文本的主要内容，如果未能解决你的问题，请参考以下文章
jQuery：在 .innerHTML 或 .text 更改时制作动画
使用 document.getElementById("id").innerHTML 时如何更改文本颜色
使用 php 循环遍历 XML 元素，查找匹配并更改子元素 innerHTML