如何在文本区域突出显示文本的一部分

How to highlight a part of text in textarea

本文关键字：文本 显示 一部分 区域      更新时间：2024-06-14

有没有办法在文本区突出显示文本的一部分？

假设文本是Hi @twitter @twitpic，现在我只想突出显示@twitter和@twitpic，而不是Hi。这可能吗？

这必须马上发生。

PS：我不想使用iFrame

提前感谢

对该文本使用setSelectionRange方法

样本代码：

<body>
    <section>
        <textarea id="textarea"></textarea>
        <button id="hgh">Hightlight @twiiter</button>
    </section>
    <script>
        window.onload = function () {
            var textarea = document.getElementById("textarea");
            var checkError = document.getElementById("hgh");
            checkError.addEventListener("click", function () {
                var index = textarea.innerText.indexOf("@twitter");
                if( index >= 0)
                    textarea.setSelectionRange(index, index + 8);
            });
        }
    </script>
</body>

如果不在特定单词周围包装标签，就无法突出显示它（或者正如我所说，至少我不知道如何突出显示）。但如果包装标签没有问题，则应该使用regEx。

对于以@开头的单词：

replace(/@([^ ]+)/g, '<span class="atsign">@$1</span>');

对于以#开头的单词：

status.replace(/#([^ ]+)/g, '<span class="hashtag">#$1</span>');

检查这个小提琴

编辑：您可以替换

var status = 'I tweeted something #one #two @three @four';

带有

var status = $('#phrase').text();

我来这里是为了寻找一个可以在文本区域突出显示某些单词的答案。在这条线索中找不到答案。所以，添加我是如何做到的：

对于这个示例，您可以执行以下操作：

  1. 从这里下载并包含脚本：http://garysieling.github.io/jquery-highlighttextarea/index.html

  2. 使用这个：

    <script>
$('textarea').highlightTextarea({
 words: ['@twitter', '@twitpic'],
 id: 'demoCustom',
 caseSensitive: false
 // or a regular expression like -> words: ['@([^ ]+)']
});
</script>
<style>
 #demoCustom mark {
  padding:0 3px;
  margin:-1px -4px;
  border-radius:0.5em;
  border:1px solid pink;
 }
</style>

更多示例：http://garysieling.github.io/jquery-highlighttextarea/examples.html

使用jQuery非常简单。

HTML部分：

<textarea id="test">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam rhoncus aliquam metus. Praesent vitae arcu tempor neque lacinia pretium.</textarea>
<button id="search">search</button>

JS部分：

$(function(){
  $("#search").click(function(){
    var area   = $('#test');
    var findWord = "rhoncus";
    var index = area.val().indexOf(findWord);
    area.focus().prop({'selectionStart': index, 'selectionEnd': index+findWord.length})          
  })
})

只要将变量findWord更改为您想要突出显示的内容即可。

相关文章：