Question

我正在编写一个脚本来查找和着色在我的文本区域中重复显示的值，我使用以下符号作为分隔符：＆＃34; |＆＃34;，＆＃34; ＆＃34;，＆＃34;〜＆＃34;，我尝试用文本中单词的频率构建一个数组，然后我只是在文本中重复出现一个单词列表：colorWords它看起来像这样：

var colorWords = Object.keys(filtered)

然后我尝试通过创建一个方法来找到它们并将它们替换成具有ans特定颜色的字符串来着色这些单词：

'<span style="color:'+colors[Math.floor((Math.random(148) * colors.length) + 1)]+'">'+colorWords[i]+'</span>'

我正在使用一个随机生成器来分配颜色，但我没有给重复的单词着色，因为我的脚本正在着色包含我的列表中一个单词的字符的所有匹配，称为colorWords，它着色所有＆＃34 ; X＆＃34;，以及匹配的所有子字符串，我想修复它并改进我的代码，我的完整代码如下所示：

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><script src="./code33_files/lodash.js"></script> 
</head><body>
<p id="demo"></p>
<textarea cols="150" rows="15" id="texto">
"RBD|X|RBD3|C|92173~GJHGWO.NAYE" "SAMBORNSiPOSSSTHRa1"
"RBD|X|RBD|C|92173~GJHGX4.NAYE" "SAMBORNSiPOSSSTHRa"
"RBD|X3|RBD3|C|92173~GJHGX6.NAYE" "SAMBORNSiPOSSSTHRa1"
"RBD|X|RBD|C|92173~GJHGX8.NAYE" "SAMBORNSiPOSSSTHRa2"
"RBD|X|RBD|C|92173~GJHGXA.NAYE" "SAMBORNSiPOSSSTHRa2"
"RBD|X3|RBD|C|92173~GJHGXC.NAYE" "SAMBORNSiPOSSSTHRa"
</textarea>
<div id="out1"></div>
<script>
var text = document.getElementById("texto").value;
var splitWords = text.split(/[["\|~]/);
var cleanArray  = _.remove(splitWords, function (word) {return word !== '' && word !== ' ' && word !== '\n'});
var dict = cleanArray.reduce(function(p,c) {
    if (p[c] === undefined) {
        p[c] = 1;
    } else {
        p[c]++;
    }
    return p;
},{});
console.log(dict);
var filtered = Object.keys(dict).reduce(function (filtered, key) {
    if (dict[key] > 1) filtered[key] = dict[key];
    return filtered;
}, {});
var colorWords = Object.keys(filtered)
colors = ["AliceBlue","AntiqueWhite","Aqua","Aquamarine","Azure","Beige","Bisque","Black","BlanchedAlmond","Blue","BlueViolet","Brown","BurlyWood","CadetBlue","Chartreuse","Chocolate","Coral","CornflowerBlue","Cornsilk","Crimson","Cyan","DarkBlue","DarkCyan","DarkGoldenRod","DarkGray","DarkGrey","DarkGreen","DarkKhaki","DarkMagenta","DarkOliveGreen","DarkOrange","DarkOrchid","DarkRed","DarkSalmon","DarkSeaGreen","DarkSlateBlue","DarkSlateGray","DarkSlateGrey","DarkTurquoise","DarkViolet","DeepPink","DeepSkyBlue","DimGray","DimGrey","DodgerBlue","FireBrick","FloralWhite","ForestGreen","Fuchsia","Gainsboro","GhostWhite","Gold","GoldenRod","Gray","Grey","Green","GreenYellow","HoneyDew","HotPink","IndianRed","Indigo","Ivory","Khaki","Lavender","LavenderBlush","LawnGreen","LemonChiffon","LightBlue","LightCoral","LightCyan","LightGoldenRodYellow","LightGray","LightGrey","LightGreen","LightPink","LightSalmon","LightSeaGreen","LightSkyBlue","LightSlateGray","LightSlateGrey","LightSteelBlue","LightYellow","Lime","LimeGreen","Linen","Magenta","Maroon","MediumAquaMarine","MediumBlue","MediumOrchid","MediumPurple","MediumSeaGreen","MediumSlateBlue","MediumSpringGreen","MediumTurquoise","MediumVioletRed","MidnightBlue","MintCream","MistyRose","Moccasin","NavajoWhite","Navy","OldLace","Olive","OliveDrab","Orange","OrangeRed","Orchid","PaleGoldenRod","PaleGreen","PaleTurquoise","PaleVioletRed","PapayaWhip","PeachPuff","Peru","Pink","Plum","PowderBlue","Purple","RebeccaPurple","Red","RosyBrown","RoyalBlue","SaddleBrown","Salmon","SandyBrown","SeaGreen","SeaShell","Sienna","Silver","SkyBlue","SlateBlue","SlateGray","SlateGrey","Snow","SpringGreen","SteelBlue","Tan","Teal","Thistle","Tomato","Turquoise","Violet","Wheat","White","WhiteSmoke","Yellow","YellowGreen"]
for (i = 0; i < colorWords.length; i++) { 
    word=colorWords[i];
    text = text.replace(new RegExp(word, 'g'), '<span style="color:'+colors[Math.floor((Math.random(148) * colors.length) + 1)]+'">'+colorWords[i]+'</span>');
}
document.getElementById("out1").innerHTML = text;
</script>
</body></html>

我为了不考虑这个问题而感到困惑我想说这次我正在寻找修复替换的方法，如下所示：

for (i = 0; i < colorWords.length; i++) { 
    word=colorWords[i];
    text = text.replace(new RegExp(word, 'g'), '<span style="color:'+colors[Math.floor((Math.random(148) * colors.length) + 1)]+'">'+colorWords[i]+'</span>');
}

还有改进我的代码的方法，因为这是我最初用来解决问题的方法，并且为那些字符串着色，当我显示textarea coloreated时，我也松开了行间的分隔，我想修复它，我很欣赏如何实现这一目标的建议。

Answer 1

https://jsfiddle.net/tfhg9ccd/ 使用正则表达式修改（使用“\ b”）：

new RegExp("\\b"+word+"\\b", 'g')

如何修复此脚本以对在文本区域中重复出现的单词进行着色？

1 个答案: