Question

感谢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);
}

你能帮忙吗？

提前致谢

Answer 1

不是直接搞乱整个页面的HTML（这会破坏所有事件处理程序并强制浏览器重新整理整个页面，并且可能被不同浏览器重新制作的HTML所欺骗），我建议这个DOM操作：< / p>

$("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>';
});

Answer 2

$ foo是否已修复？你为什么不使用正则表达式？

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

Answer 3

使用RegExp进行搜索和替换，如下所示：

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);
}

Answer 4

使用普通的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。

Javascript查找并替换变量

4 个答案: