Click here to Skip to main content
15,880,967 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi All,

I want to apply style to selected text in html text.

Ex:

We are showing some text in p tag

This is a sample application

.

User select wants to select sample alone and wants to change the BG color. So our idea is to insert one more

tag for sample text alone and applying styles.

Output:

P tag This is a p tag style = ‘background-color:Red; sample p tag application p tag

How to do it. Any samples in JQuery. Please guide me. It should support multi browser.

Posted
Updated 13-Nov-13 18:59pm
v3
Comments
♥…ЯҠ…♥ 14-Nov-13 1:02am    
Use paste as is option while copy pasting the code.. its messed up here.... can't you see it?

1 solution

XML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" language="javascript">
    $(function() {
        $('p').wrapInner('<span></span>');
        $('p').html($('p').text().split(' ').join('</span> <span>'));

        $('span').click(function() {
            $('span').removeClass('color');
            $(this).addClass('color');
        });
    });
</script>
<style type="text/css">
.color
{
    background-color:Red;
}
</style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <p>This is a sample application</p>
    </div>
    </form>
</body>
</html>




This will solve your problem...
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900