1

<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 これは、私が取り組んでいるJSと一緒のHTMLです。

                <!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;
4

1 に答える 1

5

テキスト ノード内の既存のコンテンツを置き換えるように設定するだけでなく、マークアップを HTML として処理する必要があります。このために、ステートメントを置き換えます

children[child].nodeValue= output;

以下によって：

var newNode = document.createElement('span');
newNode.innerHTML = output;
document.body.replaceChild(newNode, children[child]);
于 2013-01-22T13:34:51.637 に答える