Fatal编程技术网
  • javascript/
  • Javascript 如何使元素textarea自动为子字符串着色？

Javascript 如何使元素textarea自动为子字符串着色？

javascript html css

Javascript 如何使元素textarea自动为子字符串着色？,javascript,html,css,Javascript,Html,Css,有一个可以书写并自动将单词涂成红色的最佳方法是什么 即使它没有被空格包围，也应该给它上色。 因此，例如，它应该仍然适用于文本我吃了红肉和单词reddit 是一个查找带有红色字样的单词的绝佳场所 我有以下代码： 正文{ 保证金：0； } 文本区{ 背景色：鬼影白； 边界：0； 身高：100%； 大纲：无； 调整大小：无； 宽度：100%； } 您不能将部分样式添加到可编辑输入区域内的文本中，如input或textarea。它被视为单个文本块，只能作为一个整体进行样式设置 但是，可以通过巧妙地定位

有一个
可以书写并自动将单词
涂成红色的最佳方法是什么

即使它没有被空格包围，也应该给它上色。

因此，例如，它应该仍然适用于文本<代码>我吃了红肉
和单词<代码>reddit

是一个查找带有
红色
字样的单词的绝佳场所

我有以下代码：

正文{
保证金：0；
}
文本区{
背景色：鬼影白；
边界：0；
身高：100%；
大纲：无；
调整大小：无；
宽度：100%；
}
您不能将部分样式添加到可编辑输入区域内的文本中，如
input
或
textarea
。它被视为单个文本块，只能作为一个整体进行样式设置

但是，可以通过巧妙地定位样式化的
span
元素来模拟所需的效果

有一个这样的项目可以提供即时文本突出显示。看看他们：

我在我的一个个人项目中使用了codemirror。你也应该看看

您不能向可编辑输入区域内的文本添加部分样式，如
input
或
textarea
。它被视为单个文本块，只能作为一个整体进行样式设置

但是，可以通过巧妙地定位样式化的
span
元素来模拟所需的效果

有一个这样的项目可以提供即时文本突出显示。看看他们：

我在我的一个个人项目中使用了codemirror。你也应该看看

因此，您可以使用contenteditable div，匹配前面没有
的任何红色，并将该红色替换为：
“$1red&zwnj；”
结尾的零宽度非连接符字符用作范围的分隔符

document.getElementById（'foo'）.addEventListener（'input'，function（e）{
变量re=/（[^\>]）红色/；
var split=this.innerHTML.replace（re，“$1red&zwnj；”）；
this.innerHTML=split；
placeCaretAtEnd（本）；
})
函数placeCaretAtEnd（el）{
el.focus（）；
if（typeof window.getSelection！=“未定义”&&typeof document.createRange！=“未定义”）{
var range=document.createRange（）；
范围。选择节点内容（el）；
范围。塌陷（假）；
var sel=window.getSelection（）；
选择removeAllRanges（）；
选择添加范围（范围）；
}else if（typeof document.body.createTextRange！=“未定义”）{
var textRange=document.body.createTextRange（）；
textRange.moveToElementText（el）；
textRange.collapse（false）；
textRange.select（）；
}
}
正文{
保证金：0；
}
文本区{
背景色：鬼影白；
边界：0；
身高：100%；
大纲：无；
调整大小：无；
宽度：100%；
}
.特殊颜色{
颜色：红色；
}
这样您就可以使用contenteditable div，匹配前面没有
的任何红色，并将其替换为：
“$1red&zwnj；”
结尾的零宽度非连接符字符用作范围的分隔符

document.getElementById（'foo'）.addEventListener（'input'，function（e）{
变量re=/（[^\>]）红色/；
var split=this.innerHTML.replace（re，“$1red&zwnj；”）；
this.innerHTML=split；
placeCaretAtEnd（本）；
})
函数placeCaretAtEnd（el）{
el.focus（）；
if（typeof window.getSelection！=“未定义”&&typeof document.createRange！=“未定义”）{
var range=document.createRange（）；
范围。选择节点内容（el）；
范围。塌陷（假）；
var sel=window.getSelection（）；
选择removeAllRanges（）；
选择添加范围（范围）；
}else if（typeof document.body.createTextRange！=“未定义”）{
var textRange=document.body.createTextRange（）；
textRange.moveToElementText（el）；
textRange.collapse（false）；
textRange.select（）；
}
}
正文{
保证金：0；
}
文本区{
背景色：鬼影白；
边界：0；
身高：100%；
大纲：无；
调整大小：无；
宽度：100%；
}
.特殊颜色{
颜色：红色；
}
您不能使用
textarea
，而是使用
contenteditable
span（
span
建议避免输入
0时出现问题）{
var range=win.getSelection（）.getRangeAt（0）；
var precretange=range.cloneRange（）；
预重排列。选择节点内容（元素）；
precretange.setEnd（range.endContainer，range.endOffset）；
CareTofset=precretange.toString（）.length；
}
}如果（（选择=文件选择）&&sel.type！=“控制”）{
var textRange=sel.createRange（）；
var precarteTextRange=doc.body.createTextRange（）；
PrecretTextRange.moveToElementText（元素）；
setEndPoint（“EndToEnd”，textRange）；
CareTofset=PrecretTextRange.text.length；
}
返回caretofset；
}
函数setCaretPosition（元素，偏移）{
var range=document.createRange（）；
var sel=window.getSelection（）；
//选择合适的节点
var currentNode=null；
var-previousNode=null；
对于（var i=0；i0）{
currentNode=currentNode.childNodes[0]；
}
//计算当前节点中的偏移量
if（previousNode！=null）{
偏移量-=上一个节点的长度；
}
//检查当前节点是否有足够的长度

如果（偏移量您不能使用
textarea
，请改用
contenteditable
span（
span
建议避免输入
0时出现问题）{
var range=win.getSelection（）.getRangeAt（0）；
var precretange=range.cloneRange（）；
预重排列。选择节点内容（元素）；
precretrange.setEnd（range.endContainer，range.e

<html>
<head>
    <style>
    #myTextarea {
        border: 1px solid black;
        border-radius: 5px;
        min-height: 50px;
        width: 50%;
    }
    .hl-red {
        color: red;
    }
    </style>
</head>
<body>
<div id="myTextarea" contenteditable>Test string</div>
<script>
var createHighlighter = function createHighlighter( word ) {
    // Let's create a reusable function that can highlight any word.
    // You call this function providing the word you want highlighted.
    // Then this returns a function that will insert some html spans around each instance of the word.
    // You can the call the returned function with any string to get the string saturated with the span tags.
    return function highlight( str ) {
        // We split on the word we want to highlight, so our array contains all the non-highlighted chunks.
        // Since we can call the function multiple times in a row, we will usually want to remove the previous highlights, so we don't double-highlight it.
        // This can be easily done with a simple global replace regex.
        var chunks;
        if (str === '<br>') return '';
        else {
            chunks = str.replace(/\<span\sclass="hl-red"\>/g, '').replace(/\<\/span\>/g, '').split(word);
            // Then we add the non-highlighted text + the <span> + the highlighted word.
            return chunks.reduce(function( html, chunk, index ) {
                html += chunk;
                // Add the highlighted word, except for the last chunk, since that's just the end of the string.
                if ((index + 1) !== chunks.length) html += '<span class="hl-red">' + word + '</span>';
                return html;
            }, '');
        }
    };
};

var wordToHighlight = 'red';

var highlightRed = createHighlighter( wordToHighlight );

var highlightArea = function highlightArea( event ) {
    event.target.innerHTML = highlightRed( event.target.innerHTML );
};

document.querySelector('#myTextarea').addEventListener('keyup', highlightArea);

</script>
</body>
</html>