如何在textarea中突出显示部分文本

Question

如何在textarea中突出显示部分文本

Bas*_*tri 14 html javascript css textarea

有没有办法在文本区域中突出显示部分文本？

说,文字是Hi @twitter @twitpic,现在我想强调@twitter和@twitpic,而不是喜.那可能吗？

这必须在飞行中发生.

PS:我不想使用iFrame

提前致谢

Answer 1

Pay*_*far 7

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

对于以@开头的单词:

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

Run Code Online (Sandbox Code Playgroud)

对于以#开头的单词:

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

Run Code Online (Sandbox Code Playgroud)

检查这个小提琴

编辑:你可以替换

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

Run Code Online (Sandbox Code Playgroud)

同

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

Run Code Online (Sandbox Code Playgroud)

这不适用于tex所要求的textarea. (41认同)
要在 textarea 中执行此操作，这里有一个很好的解释：https://codersblock.com/blog/highlight-text-inside-a-textarea/ (2认同)

Answer 2

Abh*_*wal 5

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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，12 月前
查看次数：	21924 次
最近记录：	6 年，11 月前