Javascript 突出显示文本区域中的特定文本

我需要使用javascript在我的网页中模拟查找和替换功能，无论是使用查找和替换，但问题是如何在替换之前突出显示文本区域内匹配的搜索结果。 我试图用粗体标记替换匹配的结果，但它不起作用，因为textArea不理解HTML标记

我使用了以下代码：

function findMyText(searchTxt) {

 var textAreaTxt = "";

 textAreaTxt = document.getElementById("myTxtAreaID").value;
 var match = new RegExp(searchTxt, "ig");     
 var boldText = '<B>' + searchTxt+ '<\/B>';
 var replaced = textAreaTxt .replace(match, boldText);

 document.getElementById("myTxtAreaID").value= replaced;
}

函数findMyText（searchTxt）{
var textAreaTxt=“”；
textAreaTxt=document.getElementById（“myTxtAreaID”）.value；
var match=new RegExp（searchTxt，“ig”）；
var boldText=''+searchTxt+''；
var replaced=textAreaTxt.replace（匹配，粗体文本）；
document.getElementById（“myTxtAreaID”）.value=已替换；
}

有没有其他方法可以突出显示textArea中的搜索结果，或者如何让textArea理解HTML标记

---

提前感谢

textarea无法呈现htmltags，您必须隐藏textarea并在div或iframe中呈现内容。这是许多所见即所得编辑器使用的技术。

---

另一种方法是使用contentEditable div，我认为唯一可行的方法是：

• 使用javascript画布绘图突出显示文本区域内的文本（？？我认为相当复杂）
• 使用“假”文本区域，使用iframe构建，就像所见即所得编辑器（ckeditor、tinymce等）所做的那样

---

该代码所做的是查找找到的文本的开头，并为文本区域设置selectionStart和selectionEnd值。它只是选择文本，就好像用户自己选择了文本一样。工作

在JSF页面中询问HTML DOM/JS问题时，您应该右键单击webbrowser中的页面，查看生成的HTML源代码，并以此为基础提问。我的问题是纯javascript，它就在JSF页面中javascript对JSF组件一无所知。JSF在Web服务器中运行并生成HTML。JavaScript在webbrowser中运行，并与JSF生成的HTML输出一起工作。再次，在浏览器中右键单击页面并查看源代码，以查看生成的HTML输出，并将您的JavaScript代码和问题完全基于此。谢谢您的考虑，但我认为您不理解我的意思，我知道jsf元素在JavaScript代码中应该有完整的ID，附加的代码很简单。@BalusC，egy是对的，这是html页面中包含的JS代码，也是进行替换的代码。。html页面的其余部分不相关我不知道contentEditable div，我只是在谷歌上搜索并尝试了一些示例，但似乎它们在所有浏览器上的工作方式都不一样。。（他们在firefox 3.6和6.0上有不同的问题；在chrome上工作得很好，…）是的，他们在不同的浏览器中表现不一样，这真的很难做到。在您的情况下，最简单的方法是在单独的div中呈现textarea的内容，当更改textarea时，然后更新div的内容。这可能会选择文本，但实际上根本不像高亮显示。如果用户选择了文本的另一部分，那么突出显示的内容就会消失在别处，而不是作者想要的内容，但不会因为特定的有害答案而投反对票吗？我知道这并不是OP想要的，但它是一个足够好的替代品。它帮助我解决了一个相关的问题，所以+1。不确定画布方式，但另一个是我能看到的唯一解决方案

t = document.getElementById("myTxtAreaID");
l = t.value.indexOf(searchText);
if(l!=-1){
t.selectionStart = l;
t.selectionEnd = l+searchText.length
}