1

テキストの最初の10文字と、「段落」という単語の色の出現を強調したいと思います。

<html>
 <body>
  This is a heading
  This is a paragraph.This is another paragraph.
 </body>
</html>
4

2 に答える 2

4

これをHTMLコンテンツと見なします。

<div id="contents">
    This is a heading
    This is a paragraph.This is another paragraph.
</div>

このjQueryコードはあなたが望むことをします：

$(document).ready(function() {
    var data = $('#contents').text().trim();

    var str = "";

    for(var i = 0; i < 10; i++) {
        str += data[i];
    }

    data = data.replace( /paragraph/g, '<span style="font-weight: bold;">paragraph</span>' );
    data = data.replace( str, '<span style="background-color: yellow;">' + str + '</span>' );

    $('#contents').html( data );
});
于 2012-07-22T06:21:14.863 に答える
1

JSでこのコードを試してください。 

<!DOCTYPE html>
    <html>
    <body>

    <p>Click the button to highlight.</p>

    <p id="demo">This is a heading. This is a paragraph. This is another paragraph.</p>

    <button onclick="myFunction()">Try it</button>

    <script type="text/javascript">
    function myFunction()
    {
        var str= document.getElementById("demo").innerHTML;
        var str1 = "";

        for(var i = 0; i < 10; i++) {
            str1 += str[i];
        }
    var n=str.replace(str1,'<span style="font-weight: bold;">' + str1 + '</span>');
    document.getElementById("demo").innerHTML=n;
    }
    </script>

    </body>
    </html>
于 2012-08-10T06:26:47.640 に答える