JQuery / JavaScript - 突出显示输入或文本区域中的部分文本[重复]答案

【问题标题】：JQuery/JavaScript - highlight a part of text from input or textarea [duplicate]JQuery / JavaScript - 突出显示输入或文本区域中的部分文本[重复]
【发布时间】：2012-08-17 11:39:35
【问题描述】：

可能重复：
How to highlight a part part of an Input text field in HTML using Javascript or JQuery

有谁知道如何突出显示input[type=text] 或textarea 中的某些文本？有可能吗？

【问题讨论】：

“突出显示文本”到底是什么意思？只是用不同的颜色或选择文字？
我尝试用具有背景颜色样式的元素替换我想要突出显示的文本。但是在输入之后，这个文本直接带有 elem
如果您只想选择文本，请使用$('input[type=text]').select()，或者如果您需要背景突出显示，请使用$('input[type=text]').css('background-color', '#FF0')。
@Felix Kling 我想简单地为部分输入文本设置背景颜色
@Mirek 我的回答在单击按钮后很快突出显示了文本。如果要在输入时突出显示，只需使用css 样式，如color 和background-color

标签： javascript jquery

【解决方案1】：

您必须在您的textarea 后面放置一个div，然后根据其文本设置样式。
注意事项：

将您的textarea background-color 设置为透明以查看您的highlighter 颜色。
您的highlighter 必须与textarea 的样式和文本内容相同，才能将span 放在正确的位置。
将highlighter 文本设置为与其背景相同的颜色，否则您将看到<b> 效果，span 效果相同。

html：

<div class="highlighter">some text <span>highlighted</span> some text</div>
<textarea>some text highlighted some text</textarea>

css：

.highlighter, textarea {
    width: 400px;
    height: 300px;
    font-size: 10pt;
    font-family: 'verdana';
}

.highlighter {
    position: absolute;
    padding: 1px;
    margin-left: 1px;
    color: white;
}

.highlighter span {
    background: red;
    color: red;
}

textarea {
    position: relative;
    background-color: transparent;
}

demo

【讨论】：

谢谢，这正是我所需要的:) 但只有在 textarea 没有滚动条时它才能正常工作
@Mirek 是的，我知道，当你滚动 textarea 时，你必须做一些变通方法来一起滚动荧光笔。
如果你喜欢插件形式（也适用于滚动条），请查看：github.com/mistic100/jQuery-highlightTextarea

【解决方案2】：

这段代码 sn-p 向您展示了如何：

window.onload = function() {
    var message = document.getElementById('message');
    // Select a portion of text
    createSelection(message, 0, 5);

    // get the selected portion of text
    var selectedText = message.value.substring(message.selectionStart, message.selectionEnd);
    alert(selectedText);
};

function createSelection(field, start, end) {
    if( field.createTextRange ) {
        var selRange = field.createTextRange();
        selRange.collapse(true);
        selRange.moveStart('character', start);
        selRange.moveEnd('character', end);
        selRange.select();
    } else if( field.setSelectionRange ) {
        field.setSelectionRange(start, end);
    } else if( field.selectionStart ) {
        field.selectionStart = start;
        field.selectionEnd = end;
    }
    field.focus();
}

【讨论】：