Javascript 用纯jQuery替换contenteditable中的动态文本_Javascript_Jquery_Contenteditable

Javascript 用纯jQuery替换contenteditable中的动态文本

javascript jquery

Javascript 用纯jQuery替换contenteditable中的动态文本,javascript,jquery,contenteditable,Javascript,Jquery,Contenteditable,我在StackOverflow上看到了一些关于这方面的问题，但似乎很难找到基于jQuery的解决方案。因此，我想提出这项质询我想用属性contenteditable=“true”替换div中的动态文本我正在寻找一个基于jQuery的解决方案，它将实现以下功能： $.settings = { path: 'https://example.com/images/', emoticons: { ':(' : 'stupid.jpg', ':)' :

我在StackOverflow上看到了一些关于这方面的问题，但似乎很难找到基于jQuery的解决方案。因此，我想提出这项质询

我想用属性

contenteditable=“true”

替换

div

中的动态文本

我正在寻找一个基于jQuery的解决方案，它将实现以下功能：

$.settings = {
    path: 'https://example.com/images/',
    emoticons: {
        ':(' : 'stupid.jpg',
        ':)' : 'smart.jpg',
    }
}

动态自动替换书面文本（键入时）
能够继续书写（替换时）

我看了一下SC Editor（），它似乎就是这样做的（例如，如果您尝试键入

：）

它会被一个表情符号所取代

我认为一个好的开始是一个包含所有元素的数组：

$.settings = {
    path: 'https://example.com/images/',
    emoticons: {
        ':(' : 'stupid.jpg',
        ':)' : 'smart.jpg',
    }
}

我一直找不到这方面的好例子。如果有人能分享他们的想法和关于这方面的任何代码，我会很高兴的

使用上述代码，如何以最佳方式完成替换？

我发现了这一点。如果你调整一下，它可能会适合你的需要。它用{}和（和）来替换{，光标在中间结束。

$('div').keyup(function(){
    //make here for loop which replace all emoticons
    $(this).text().replace(':(', 'stupid.jpg');
});

    <script type="text/javascript">
        $(document).ready(function () {
            $("#d").keypress(function (e) {
 
       
                    var charTyped = String.fromCharCode(e.which);
                    if (charTyped == "{" || charTyped == "(") {
                        // Handle this case ourselves
                        e.preventDefault();

                        var sel = window.getSelection();
                        if (sel.rangeCount > 0) {
                            // First, delete the existing selection
                            var range = sel.getRangeAt(0);
                            range.deleteContents();

                            // Insert a text node with the braces/parens
                            var text = (charTyped == "{") ? "{}" : "()";
                            var textNode = document.createTextNode(text);
                            range.insertNode(textNode);

                            // Move the selection to the middle of the text node
                            range.setStart(textNode, 1);
                            range.setEnd(textNode, 1);
                            sel.removeAllRanges();
                            sel.addRange(range);
                        }
                    }
         

            });
        });
    </script>
</head>

<body>
    <div id="d" contentEditable="true">....</div>
</body>
</html>


$（文档）.ready（函数（）{
$（“#d”）。按键（功能（e）{
var charTyped=String.fromCharCode（e.which）；
如果（charTyped==”{“| | charTyped==”（“”）{
//我们自己处理这个案子
e、 预防默认值（）；
var sel=window.getSelection（）；
如果（选择范围计数>0）{
//首先，删除现有选择
var范围=选择范围（0）；
range.deleteContents（）；
//插入带有大括号/括号的文本节点
var text=（charTyped=“{”）？“{}”：“（）”；
var textNode=document.createTextNode（文本）；
range.insertNode（textNode）；
//将所选内容移动到文本节点的中间
range.setStart（textNode，1）；
range.setEnd（textNode，1）；
选择removeAllRanges（）；
选择添加范围（范围）；
}
}
});
});
....

在找不到这个问题的答案后，我终于写了一篇文章。我希望这篇文章能对其他来找答案的人有所帮助（：

我将发布一个更通用的查找和替换解决方案（包含在一个类中）。这是针对内容可编辑的div的，在用户键入时可以工作，此外，它不会影响插入符号的位置。此实现使用不区分大小写的搜索（尽管在代码中禁用此功能很简单）它的另一个优点是，即使你在段落的中间打字（也不只是在行的末尾），它会起作用，而且会粘贴在粘贴文本上。

类查找和替换{
构造函数（$contentEditable、findAndReplaceData）{
var self=这个；
$contentEditable.on（'input blur'，函数（）{
var textNodes=self.getTextNodes（$contentEditable）；
textNodes.each（函数（i）{
//对文本执行所有替换
forEach（函数（findAndReplaceDatum）{
var find=findAndReplacedatam.find；
var replace=findAndReplaceDatum.replace；
var regexEscapedFind=self.escapeRegExp（find）；
var regexEscapedReplace=self.escapeRegExp（替换）；
var regexEscapedCaseInsensitiveFind=self.makeRegexCaseInsensitive（regexEscapedFind）；
//不区分大小写搜索具有负前瞻性的查找，以检查其与替换项的匹配是否区分大小写（也就是检查其是否确实会产生影响）
var regexString=`（？！${regexEscapedReplace}）${regexEscapedCaseInsensitiveFind}`；
做{
//获取文本节点的最新版本
textNode=self.getTextNodes（$contentEditable）[i]；
var text=textNode.data；
var regex=新的RegExp（regexString）；
var matchIndex=text.search（regex）；
var matchFound=（matchIndex！=-1）；
如果（找到匹配项）{
//选择匹配项
var range=document.createRange（）；
range.setStart（textNode，matchIndex）；
range.setEnd（textNode，matchIndex+find.length）；
//删除它
range.deleteContents（）；
//创建替换节点
var textNode=document.createTextNode（替换）；
//插入它
range.insertNode（textNode）；
//将范围设置为选定节点的末端
范围。塌陷（假）；
//将用户选择设置为范围
var sel=window.getSelection（）；
选择removeAllRanges（）；
选择添加范围（范围）；
//确保没有相邻的或空的文本节点
$contentEditable[0]。规范化（）；
}
}while（找到匹配项）
});
});
});
}
escapeRegExp（字符串）{
// https://stackoverflow.com/questions/3446170/escape-string-for-use-in-javascript-regex
返回字符串。replace（/[.*+？^${}（）\[\]\\]/g，\\$&'）；/$&表示整个匹配字符串
}
getTextNodes（$contentEditable）{
返回$contentEditable.contents（）.filter（函数（）{
返回this.nodeType==3；//文本节点
});
}
MakeRegExcaseSensitive（字符串）{
var stringArray=string.split（“”）；
stringArray=stringArray.map（函数（字符）{
if（char.toLowerCase（）！==char.toUpperCase（））
返回“[”+char.toLowerCase（）+char.toUpperCase（）+”]；
其他的
返回字符；
});
返回stringArray.join（“”）；
}
}

div{
边框：1px纯黑；
}


$（函数（）{
var findAndReplaceData=[
{
‘找到’：‘找到我’，
“替换”：“并替换为”