Использование innerHTML.replace для замены текста для создания ссылки - PullRequest
Новая
       6

Использование innerHTML.replace для замены текста для создания ссылки

1 голос
/ 19 мая 2009

Я использую Sharepoint (WSS 3.0), который, к сожалению, очень ограничен в своей способности форматировать вопросы опроса (т. Е. Он удаляет любой введенный вами HTML). В другом месте я видел решение, в котором предлагалось добавить JS в файл главной страницы, чтобы разрешить разрывы строк. Это прекрасно работает, но я хотел бы посмотреть, можем ли мы также разрешить ссылки.

В наших опросах WSS теперь я могу использовать {{br}} везде, где хочу разрыв строки (это работает). Я попытался расширить код, чтобы разрешить использование тегов ссылок (например, {{link1}} url {{link2}} Заголовок URL {{link3}}; но это не работает, предположительно, потому что обновления не происходит в целом, и браузер затем пытается отобразить его по частям, запутав его. (FF и IE показывают разные результаты, но оба терпят неудачу. Если я перепутаю порядок JS ниже - то есть, сделайте link3, 2 а затем 1 - выходные данные тоже меняются, но все равно не работают.) Есть ли лучший способ сделать это? 

<script language="JavaScript">
var className;
className = 'ms-formlabel';
var elements = new Array();
var elements = document.getElementsByTagName('td');
for (var e = 0; e < elements.length; e++)
{
if (elements[e].className == className){
elements[e].innerHTML = elements[e].innerHTML.replace(/{{br}}/g,'<br/>');
elements[e].innerHTML = elements[e].innerHTML.replace(/{{link1}}/g,'<a href="');
elements[e].innerHTML = elements[e].innerHTML.replace(/{{link2}}/g,'">');
elements[e].innerHTML = elements[e].innerHTML.replace(/{{link3}}/g,'</a>');}
}
</script>

Ответы [ 2 ]

5 голосов
/ 19 мая 2009

Вместо того, чтобы модифицировать свойство innerHTML в чанках (браузер пытается обновлять DOM каждый раз, когда вы меняете innerHTML, который, если вы предоставите неполную / разорванную разметку, очевидно, испортит все), сделайте все ваши изменения для вашей собственной строковой переменной , а затем перезаписать весь innerHTML завершенной строкой: 

<script language="JavaScript">
var className;
className = 'ms-formlabel';
var elements = new Array();
var elements = document.getElementsByTagName('td');
for (var e = 0; e < elements.length; e++)
{
if (elements[e].className == className) {
    var newHTML = elements[e].innerHTML;

    newHTML = newHTML.replace(/{{br}}/g,'<br/>');
    newHTML = newHTML.replace(/{{link1}}/g,'<a href="');
    newHTML = newHTML.replace(/{{link2}}/g,'">');
    newHTML = newHTML.replace(/{{link3}}/g,'</a>');}

    elements[e].innerHTML = newHTML;
}
</script>
3 голосов
/ 19 мая 2009

Простой ответ будет состоять в том, чтобы создать innerHTML и заменить все сразу: 

for (var e = 0; e < elements.length; e++)
{
    if (elements[e].className == className) {
        var newHTML = elements[e].innerHTML;
        newHTML = newHTML.replace(/{{br}}/g,'<br/>');
        newHTML = newHTML.replace(/{{link1}}/g,'<a href="');
        newHTML = newHTML.replace(/{{link2}}/g,'">');
        newHTML = newHTML.replace(/{{link3}}/g,'</a>');
        elements[e].innerHTML = newHTML;
    }
}

Более сложным ответом было бы использование групп захвата в вашем регулярном выражении и передача функции в качестве 2-го параметра для replace (), чтобы использовать один вызов replace () для HTML. Например, 

elements[e].innerHTML = elements[e].innerHTML.replace(/({{link1}})|({{link2}})|({{link3}})/g, 
    function (match) {
        var map = { 
            '{{link1}}' : '<a href="',
            '{{link2}}' : '>',
            '{{link3}}' : '</a>', }
        return map[match];
    });

Второе решение является более сложным и приводит к некоторым уродливым регулярным выражениям, но более эффективно, чем многократный вызов replace ().

...