Javascript 查找和替换变量答案

【问题标题】：Javascript find and replace with variablesJavascript 查找和替换变量
【发布时间】：2012-04-15 13:53:15
【问题描述】：

多亏了 stackoverflow 用户的帮助，我几乎完成了任务。我只是需要更多的帮助来解决这个问题。

我有一个 HTML 页面，其中包含我无法更改视图的动态生成的数据表。它是这样返回的：

<tr>
<td class="name">foo<</td>
<td class="time">5:36:13</td>
<td class="avtime">0:09:36</td>
<td class="transcripts">0</td><td class="views">35</td>
<td class="percent">100</td>
</tr>

我需要做的是查找和替换：

<td class="percent">$foo</td>

与：

<td class="percent"><span class="bar" style="width:$foo%"></span></td>

正如我所说的，我几乎就在那里，并且替换工作只是不使用变量值。

我现在拥有的：

function replaceScript() {
var toReplace = '<td class="percent">69</td>';
var replaceWith ='<td class="percent"><span class="bar" style="width:69%"></span>  </td>';
document.body.innerHTML = document.body.innerHTML.replace(toReplace, replaceWith);
}

你能帮忙吗？

提前致谢

【问题讨论】：

这是一个实际的元素，还是您在将字符串添加到 DOM 之前对其进行操作？
@DavidThomas - 从他们的代码中对document.body.innerHTML 的引用可以看出，它是实际的页面 DOM。
...我什至觉得自己是个傻瓜... XD

标签： javascript jquery replace find

【解决方案1】：

与其直接弄乱整个页面的 HTML（它会破坏所有事件处理程序并强制浏览器重新解析整个页面，并且可能被不同浏览器重新制造的 HTML 所愚弄），我建议使用这种 DOM 操作：

$("td.percent").each(function() {
    if (this.innerHTML == "69") {
        this.innerHTML = '<span class="bar" style="width:69%;"></span>';
    }
});

如果您希望直接从 HTML 中获取样式宽度并使用您在其中找到的任何值，那么您可以这样做：

$("td.percent").each(function() {
    var widthVal = this.innerHTML;
    this.innerHTML = '<span class="bar" style="width:' + widthVal + '%;"></span>';
});

【讨论】：

我认为您有所了解，但是我需要从 td.percent 的内容中获取宽度。这个可以吗？
@user1306706 - 根据您的评论 - 我添加了第二个选项，该选项从先前存在的 HTML 中获取宽度百分比。
谢谢，我现在就试试看。
@user1306706 - 我修复的第二个示例中有一个错字（额外的括号）。

【解决方案2】：

使用纯 JavaScript

function replaceScript()
{
    var tbl=document.getElementsByTagName('table');
    for(var t=0;t<tbl.length;t++)
    {
        var cols=tbl[t].getElementsByTagName('TD');

        for(var i=0;i<cols.length;i++)
        {
            if(cols[i].className=="percent")
            {
                var span=document.createElement('span');
                span.className="bar";
                span.innerHTML=cols[i].innerHTML; // if you want to populate the span with td's data/innerHTML, otherwise remove this line
                span.style.width=cols[i].innerHTML+'%';
                cols[i].innerHTML='';
                cols[i].appendChild(span);   
            }
        }
    }
}

这是example。

编辑或者可能是这个

function replaceScript()
{
    var tbl=document.getElementsByTagName('table');
    for(var t=0;t<tbl.length;t++)
    {
        var cols=tbl[t].getElementsByTagName('TD');
        for(var i=0;i<cols.length;i++)
        {
            if(cols[i].className=="percent")
            {
                var spanData=cols[i].innerHTML;
                cols[i].innerHTML='<span class="bar" style="'+cols[i].innerHTML+'%">'+spanData+'</span>';

            }
        }
    }
}

这是example。

【讨论】：

如果在同一个对象上可能有其他类名，"percent" 可能必须小心。你有什么理由不使用getElementsByClassName()？
我认为并非所有浏览器都支持（如果我没记错的话）。
我要么使用 Sizzle 之类的选择器库，要么使用 jQuery 中的选择器，或者为 getElementsByClassName() 使用 shim。它的浏览器兼容性在这里：caniuse.com/getelementsbyclassname。所有这些都节省了大量的编码和错误。
是真的，反正你不觉得IE8还在用，不支持这个方法所以可能我们不应该只依赖className方法这个（IE8）。
我说过我会使用像 Sizzle 或 jQuery 这样的库来解决兼容性问题，或者我会使用 shim 来解决兼容性问题的 getElementsByClassName()。我对这个问题的回答使用 jQuery，因为 OP 用 jQuery 标记了这个问题。

【解决方案3】：

使用正则表达式进行搜索和替换如下：

function replaceScript () {
  var toReplace = /<td class="percent">(\d+)<\/td>/g;
  var replaceWith ='<td class="percent"><span class="bar" style="width:$1%"></span>  </td>';
  document.body.innerHTML = document.body.innerHTML.replace (toReplace, replaceWith);
}

【讨论】：

【解决方案4】：

$foo 是固定的吗？为什么不用正则表达式？

var str = document.body.innerHTML;
var pattern = /($foo)/gim;
str.replace(pattern, "<span class=\"bar\" style=\"width:$1%\"></span>");

【讨论】：