代码之家 › 专栏 › 技术社区 › nonopolarity

除了文本区域和输入文本元素,我可以使用javascript突出显示任何文本吗?

javascript

nonopolarity · 技术社区 · 16 年前

使用javascript,很容易通过编程选择文本区域或输入文本元素内的文本。怎么样

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

是否可以使用javascript来选择“快速棕色狐狸”这个词?还是选择整个句子?

4 回复 | 直到 16 年前

Flavius Stef 16 年前

礼节 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>

jjnguy Julien Chastang 16 年前

你需要某种方法来操纵 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');

Matthew Vines 16 年前

在CSS中,您可以创建一个.highlight类

.highlight{
  background-color:yellow;
}

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

<getSpanElement>.className='highlight';

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

Marius Burz 16 年前

突出显示还是选择?我认为你其实想选择不突出显示。

突出。。。对!设置 span 元素,例如前景色和背景色。

编辑:这叫做选择。对不起,我不知道怎么做。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

4 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

4 月前

Alex · 在轻量级中同时解构和不解构变量

4 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

4 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

4 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

4 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

user3472810 · Angular@Output/EventEmitter返回undefined

5 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

5 月前