Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

can i highlight any text using Javascript other than the textarea and input text element?

Tags:

javascript

using Javascript, it is easy to programatically select the text inside a textarea or input text element. How about for

<span>The quick brown fox jumps over the lazy dog</span>

is it possible to use JavaScript to select the words "quick brown fox"? Or select the whole sentence?

like image 939
nonopolarity Avatar asked Jan 02 '26 06:01

nonopolarity


2 Answers

Courtesy of http://www.sitepoint.com/forums/showthread.php?t=459934

<script type="text/javascript">
    function fnSelect(objId) {
        fnDeSelect();
        if (document.selection) {
        var range = document.body.createTextRange();
            range.moveToElementText(document.getElementById(objId));
        range.select();
        }
        else if (window.getSelection) {
        var range = document.createRange();
        range.selectNode(document.getElementById(objId));
        window.getSelection().addRange(range);
        }
    }

    function fnDeSelect() {
        if (document.selection) document.selection.empty(); 
        else if (window.getSelection)
                window.getSelection().removeAllRanges();
    }
    </script>
<body>

<div id="test1">
    <p>jhsdgfhlsdlfkjsdklgjs</p>
    <p>jhsdgfhlsdlfkjsdklgjs</p>
    <p>jhsdgfhlsdlfkjsdklgjs</p>
</div>
<div id="test2">
    <p>jhsdgfhlsdlfkjsdklgjs</p>
    <p>jhsdgfhlsdlfkjsdklgjs</p>
    <p>jhsdgfhlsdlfkjsdklgjs</p>
</div>
<a href="javascript:fnSelect('test1');">Select 1</a>
<a href="javascript:fnSelect('test2');">Select 2</a>
<a href="javascript:fnDeSelect();">DeSelect</a>
</body>
like image 108
Flavius Stef Avatar answered Jan 06 '26 11:01

Flavius Stef


You will need some way to manipulate the span tag. Such as an id, but then in javascript I would edit some of the style properties. You could have a property for everything you want to highlight like what is shown below.

.HL {
    background: #ffff99; 
    color: #000000;
} 

If you do that then you will need to get a reference to the specific tag.

DocumentgetElementsByTagName("title")

Otherwise Document.getElementByID("ID") is good for unique ids. Then using setAttribute(name, value) To change the class to the one given.

This is just a simple example but there are many ways to do this.

<span id="abc" class=""> Sample </span>
var temp = Document.getelementByID("abc");
temp.setAttribute('class', 'HL');
like image 32
Maleki Avatar answered Jan 06 '26 12:01

Maleki



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!