Сделать текст HTML полужирным

Я написал эту функцию, которая принимает слово в качестве входных данных и помещает его в тег <b>, чтобы оно было выделено жирным шрифтом при отображении в HTML. Но когда оно действительно визуализируется, слово не выделено жирным шрифтом, а только окружено тегом <b>.

Вот функция:

function delimiter(input, value) {
    return input.replace(new RegExp('(\\b)(' + value + ')(\\b)','ig'), '$1<b>$2</b>$3');
}

При предоставлении значения и ввода, например. «сообщение» и «Это тестовое сообщение»:

Результат: This is a test <b>message</b>
Требуемый результат: This is a test message

Даже замена значения на value.bold() возвращает то же самое.

EDIT Это HTML вместе с JS, над которым я работаю:

                <!DOCTYPE html>
            <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
            <head>
            <title>Test</title>

            <script>

            function myFunction(){
                var children = document.body.childNodes;
                for(var len = children.length, child=0; child<len; child++){
                 if (children[child].nodeType === 3){ // textnode
                    var highLight = new Array('abcd', 'edge', 'rss feeds');
                    var contents = children[child].nodeValue;
                    var output = contents; 
                    for(var i =0;i<highLight.length;i++){
                        output = delimiter(output, highLight[i]); 
                    }

                                children[child].nodeValue= output; 
                }
                }
            }

            function delimiter(input, value) {
                return unescape(input.replace(new RegExp('(\\b)(' + value + ')(\\b)','ig'), '$1<b>$2</b>$3'));
            }
            </script>



            </head>
            <body>
            <img src="http://some.web.site/image.jpg" title="knorex"/>

            These words are highlighted: abcd, edge, rss feeds while these words are not: knewedge, abcdefgh, rss feedssss

            <input type ="button" value="Button" onclick = "myFunction()">
            </body>
            </html>

Я в основном получаю результат функции разделителя и меняю nodeValue дочернего узла.

Возможно ли, что что-то не так с тем, как я возвращаю то, что мне возвращает функция?

Это то чем я занимаюсь:

children[child].nodeValue = output;

javascript html bold
person user1008724    schedule 22.01.2013    source источник
comment
как это визуализируется? Вы используете какой-то фреймворк?   -  person FreeCandies    schedule 22.01.2013
comment
Как вы помещаете его обратно в DOM? Хотите верьте, хотите нет, но это работает. Кроме того, чтобы быть приверженцем семантики, я считаю, что вы должны использовать теги <strong> вместо тегов <b>.   -  person Devin McInnis    schedule 22.01.2013
comment
Я добавил дополнительную информацию к моему вопросу. Как упоминал @akaDevo, я думаю, что что-то не так с тем, как я возвращаю его в DOM.   -  person user1008724    schedule 22.01.2013
comment
я думаю, нам понадобится HTML, в котором вы пытаетесь отобразить это   -  person Jonathan dos Santos    schedule 22.01.2013
comment
Привет. Я добавил весь свой HTML и JS в редактирование! Спасибо!   -  person user1008724    schedule 22.01.2013

Ответы (1)


arrow_upward
5
arrow_downward

Вам нужно, чтобы разметка обрабатывалась как HTML, а не просто заменяла существующее содержимое в текстовом узле. Для этого замените утверждение

children[child].nodeValue= output;

следующим:

var newNode = document.createElement('span');
newNode.innerHTML = output;
document.body.replaceChild(newNode, children[child]);
person Jukka K. Korpela    schedule 22.01.2013