locked
how to use document.execCommand with different scenarios? RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    Hi,
     I've used document.execCommand("ForeColor",false,"Red") and it makes the font as red color. But it is not a good standard of HTML5. In order that, we need to use css class. But, it is more complex to use it. Let me give an example, I have a text like "ABC DEF". suppose if i select "BC" and exec the command and BC becomes red in color. and now if user select "AB" and I want "A" becomes black in color and B becomes combination of black and red in color. How to achieve this using document.execCommand.

    Balaji -Please click mark as answer if my reply solves your problem.

    Tuesday, September 24, 2013 6:07 AM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi Balaji,

    What do you mean by "B becomes combination of black and red in color", you mean the dark red? or do you mean by a part of the B is black and other part is red?

    I also tried something, I'm not sure if the thing can help you. My code will select the words "site is worth clicking" firstly, color them as Red, and then select the words "favorite Web site is worth", color them as Green, after that I will find intersection for this two words array and color them as Yellow. I think it somehow like your requirement AB and BC.

    This part is for JavaScript.

    <script type="text/javascript">
        function Test() { 
            var r1 = document.body.createTextRange();
            r1.findText("site is worth clicking");
            r1.select();
            r1.execCommand("ForeColor", false, "Red");
            var array1 = r1.text.split(" ");
            var r2 = document.body.createTextRange();
            r2.findText("favorite Web site is worth");
            r2.select();
            var array2 = r2.text.split(" ");
            r2.execCommand("ForeColor", false, "Green");


            var intersection = intersect(array1, array2);

            for(i=0;i<intersection.length;i++)
            {
                r2.findText(intersection[i]);
                r2.select();
                r2.execCommand("ForeColor", false, "Yellow");
            }
        }

        function intersect(a, b) {
            var t;
            if (b.length > a.length) t = b, b = a, a = t; 
            return a.filter(function (e) {
                if (b.indexOf(e) !== -1) return true;
            });
        }

    And for HTML body:

    <body>
<p data-unselectable="on">
        Select any portion of the following blue site, such as &quot;My
        favorite Web site&quot;. Click the button to turn the selected text into a link.
    </p>
    <p id="di" style="color:#3366CC">
        My favorite Web site is worth clicking on. Don't forget
        to check out my favorite site group!
    </p>
    <button onclick="Test()" data-unselectable="on">Click me!!</button>
</body>

    Best Regards,

    --James

    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.



    Wednesday, September 25, 2013 2:17 AM
    Moderator