如何突出顯示textarea中的一部分文本

Question

有沒有辦法突出顯示文本區域中的一部分文本？

說，文Hi @twitter @twitpic ，現在我想強調@twitter，只和不@twitpic喜。 這可能嗎？

這必須即時發生。

PS：我不想使用iFrame

提前致謝

Answer 1

在該文本上使用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>

Answer 2

如果沒有在特定單詞周圍包裹標簽，您就無法突出顯示它（或者正如我所說，至少我不知道如何）。 但是如果包裝標簽沒有問題，你應該使用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();

Answer 3

我來這里是為了尋找一個可以突出顯示文本區域中某些單詞的答案。 在這個線程中沒有找到答案。 所以，補充一下我是怎么做的：

對於此示例，您將執行以下操作：

從這里下載並包含腳本： http : //garysieling.github.io/jquery-highlighttextarea/index.html

並使用這個：

 <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

Answer 4

使用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 即可突出顯示任何內容。

如何突出顯示textarea中的一部分文本

問題描述

4 個解決方案

解決方案1
11 2016-09-08 08:44:57

解決方案2
7 已采納 2013-12-11 12:22:24

解決方案3
2 2018-04-12 07:23:10

解決方案4
1 2020-08-21 12:55:14

如何突出顯示textarea中的一部分文本

問題描述

4 個解決方案

解決方案1 11 2016-09-08 08:44:57

解決方案2 7 已采納 2013-12-11 12:22:24

解決方案3 2 2018-04-12 07:23:10

解決方案4 1 2020-08-21 12:55:14

解決方案1
11 2016-09-08 08:44:57

解決方案2
7 已采納 2013-12-11 12:22:24

解決方案3
2 2018-04-12 07:23:10

解決方案4
1 2020-08-21 12:55:14