我可以使用除textarea和输入文本元素之外的Javascript来突出显示任何文本吗?

时间:2009-05-28 20:40:36

标签: javascript

使用Javascript,很容易以编程方式选择textarea或输入文本元素中的文本。

怎么样?
<span>The quick brown fox jumps over the lazy dog</span>

是否可以使用JavaScript来选择单词“quick brown fox”?或者选择整个句子?

4 个答案:

答案 0 :(得分:5)

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>

答案 1 :(得分:1)

您需要某种方式来操纵span标记。例如id,但在javascript中我会编辑一些style属性。您可以为要突出显示的所有内容添加属性,如下所示。

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

如果你这样做,那么你需要获得对特定标签的引用。

DocumentgetElementsByTagName("title")

否则Document.getElementByID("ID")适用于唯一ID。 然后使用setAttribute(name, value)将类更改为给定的类。

这只是一个简单的例子,但有很多方法可以做到这一点。

<span id="abc" class=""> Sample </span>
var temp = Document.getelementByID("abc");
temp.setAttribute('class', 'HL');

答案 2 :(得分:0)

在css中你可以创建一个.highlight类

.highlight{
  background-color:yellow;
}

在javascript中你可以将.highlight类添加到你想要突出显示的元素

<getSpanElement>.className='highlight';

然后突出显示此文本,但未选中。

答案 3 :(得分:0)

突出显示还是选择?我想你实际上想选择不突出显示。

突出显示......是的!设置span元素的正确CSS属性,例如前景色和背景色。

编辑:这称为选择。对不起,我不知道有什么办法。