Javascript 如何包装匹配的<；单词；p>；从带有<；span class="；x">；？

我有从.load（dictionary.txt）生成的任何数组

vals\u array

，现在我想将contenteditable div中的每个单词与

中的文本换行符进行比较，如果匹配数组中的任何单词，它会将该单词换行符

以下是数组代码的文本：

var vals_array = [];

$.each(splitCntEditableTxt,function(key,val){
  var nameFound = $.inArray(val.trim().toUpperCase(), dictionary);
  if (nameFound === -1){
    //alert(val + " No Match"); //DEBUG
  } else {
    //alert(val + " found in array"); //DEBUG
    //$("#notes").append('<span class="OMG">'+val+'</span>');
    vals_array.push(val);
  }
});

var-vals_数组=[]；
$.each（splitCntEditableTxt，函数（键，值）{
var nameFound=$.inArray（val.trim（）.toUpperCase（），字典）；
如果（nameFound==-1）{
//警报（val+“不匹配”）；//调试
}否则{
//警报（在数组中找到val+）；//调试
//$（“#注释”）。附加（“”+val+“”）；
val_数组推送（val）；
}
});

下面是我想用来比较过滤文本并从数组中逐个匹配它们的代码：

$('#notes').findText({query: vals_array}).each(function (){
  //wrap matched word with <span>
});

$（'#notes'）.findText（{query:vals#u array}）.each（函数（）{
//将匹配的单词用
});

问题是，

中的文本有时有：、-空格、\n\r和其他非单词元素。那么，我如何首先过滤掉中的文本，只留下纯单词，然后将它们与

vals\u array

的数组进行比较，如果匹配，则用一个

非常感谢~

您可以使用以链接替换单词<代码>替换接受两个参数：

要替换的正则表达式或字符串

返回替换项的替换项或函数

这意味着我们可以：

阅读您的

的

文本内容

使用

/\w+/g

每一个单词都要查字典里有没有

如果是，则返回一个

如果不是，只需返回单词即可

将其写回

的

innerHTML

下面的示例显示了这些步骤。它使用了一些现代javascript特性，因此您可能需要将其传输到es5。而且，它不能很好地处理插入符号的位置，因此您必须这样做。（目前，它仅将其放在内容的末尾）

示例中的

替换了以下单词：

foo

、

bar

和

baz

。您可以将其他单词添加到代码段顶部的数组中

//您提到的数组源代码
const wordtomatch=[“foo”、“bar”、“baz”]；
//为了快速查找，我们制作了一套
const matchingDict=新集合（字匹配）；
//检查字典中是否有单词，并可能返回
//元素
const convertWord=word=>matchingDict.has（word）
? `${word}`
：字；
//检查事件目标的文本内容以查找字典中的单词
//并相应更新
常量handleChange=e=>{
e、 target.innerHTML=e.target.textContent
.替换（/\w+/g，convertWord）；
setRangeToEnd（如目标）；
};
//将逻辑附加到可编辑的内容
文件
.查询选择器（“p”）
.addEventListener（“输入”，延迟（300，手动更改））；
//仅在上次更改后x ms运行文本自适应的实用程序
功能延迟（dt，fn）{
设to=null；
返回e=>{
清除超时（to）；
to=设置超时（（）=>fn（e），dt）；
}
}
函数setRangeToEnd（目标）{
const sel=window.getSelection（）；
常量范围=document.createRange（）；
范围。选择节点内容（目标）；
范围。塌陷（假）；
选择removeAllRanges（）；
选择添加范围（范围）；
}

p{边框：1px纯灰；填充：.5em；}
.亮点{
背景：黄色；
填充：.25rem；
边界半径：1em.5em.75em 0.25em；
}

在下面的文本区域中键入。使用单词
foo
、
bar
或
baz
触发链接插入。

同侧阴唇