突出显示 TextArea 中的一段字符串答案

【问题标题】：Highlighting a piece of string in a TextArea突出显示 TextArea 中的一段字符串
【发布时间】：2010-08-23 15:49:13
【问题描述】：

我正在尝试突出显示“Textarea”中的一段文本。我在那个 TextArea 中有一个长字符串：

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident

我有一个函数可以提取“开始”和“结束”变量之间的第一个字符串出现。例如：

extract("ipsum", "consectetur") // This will give: "dolor sit amet,"

但是，我想要的是选择函数的结果，以便突出显示结果字符串“dolor sit amet”。

有可能吗？我该怎么做？

谢谢，

问候。

【问题讨论】：

高亮显示，我想你的意思是选择？

标签： javascript html textarea highlighting

【解决方案1】：

以下代码将在所有主流浏览器（包括 IE 6+）的文本区域中选择文本范围：

function offsetToRangeCharacterMove(el, offset) {
    return offset - (el.value.slice(0, offset).split("\r\n").length - 1);
}

function setSelection(el, start, end) {
    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
        el.selectionStart = start;
        el.selectionEnd = end;
    } else if (typeof el.createTextRange != "undefined") {
        var range = el.createTextRange();
        var startCharMove = offsetToRangeCharacterMove(el, start);
        range.collapse(true);
        if (start == end) {
            range.move("character", startCharMove);
        } else {
            range.moveEnd("character", offsetToRangeCharacterMove(el, end));
            range.moveStart("character", startCharMove);
        }
        range.select();
    }
}

var textarea = document.getElementById("your_textarea");
var val = textarea.value;
var start = val.indexOf("ipsum") + 5, end = val.indexOf("consectetur");
setSelection(textarea, start, end);

【讨论】：

除了+5 kludge 之外都很好，这大概是第一个字符串的长度。这与stackoverflow.com/questions/1981088/… 的答案之一中的算法非常相似
@MarkHu：是的，+ 5 就是这样，为简洁起见。改用"ipsum".length 似乎有点奇怪。我认为与其他答案的相似之处可能是该答案借用了我的一个答案（例如this one）。

【解决方案2】：

我记得不久前看到过这个...http://www.din.or.jp/~hagi3/JavaScript/JSTips/Mozilla/Samples/NSHTMLTextAreaElement.htm

它相当复杂，我永远不会费心去琢磨它。不知道这是你需要的，或者你是否可以使用它。 :)

【讨论】：

看起来不错，但它适用于 IE 6/7/8 吗？（目前无法对此进行测试。）
不，它甚至不尝试支持 IE。
大声笑这不应该是“IE 甚至不尝试支持任何东西”：p 抱歉，它不起作用。 :p

【解决方案3】：

您不能在文本区域中突出显示文本的不同部分。您可以选择一个部分但不能选择多个部分，并且选择不会突出显示。您可以获取 textarea 的内容，但它是 <div> 例如，并通过用 <span class="highlight">...</span> 包围它们来突出显示这些短语

【讨论】：

OP 没有要求突出显示前两个字符串。他想突出显示它们之间的文字。