Javascript найти и заменить переменными - PullRequest
Новая
       2

Javascript найти и заменить переменными

1 голос
/ 01 апреля 2012

Я почти с чем-то здесь благодаря помощи пользователей 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);
}

Можете ли вы помочь?

Заранее спасибо

Ответы [ 4 ]

2 голосов
/ 01 апреля 2012

Вместо того, чтобы возиться с 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>';
});
1 голос
/ 01 апреля 2012

Использование простого 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);   
            }
        }
    }
}

Вот пример .

Редактировать Или это может быть 

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

            }
        }
    }
}

Вот пример .

1 голос
/ 01 апреля 2012

Используйте 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);
}
1 голос
/ 01 апреля 2012

Исправлен ли $ foo? Почему вы не используете регулярные выражения? 

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