它很容易突出显示的话,框架自由,不区分大小写,即使在html标记的代码。
可以帮助改进纯JavaScript代码吗?
工作,几乎完美。
(document.body).realcar("word high");
Bug仅在以下情况下发生:用户搜索连续的单词。
第二个单词被替换为句子中的其他单词,该单词位于“”(文本片段的最后一个空格)之后。因为它不替换为搜索到的第二个单词。
完美地工作来搜索:“light nos”,在这种情况下:Highlight <strong>nossa!</strong>
窃听功能:
HTMLElement.prototype.realcar = function(word) { var el = this;
const wordss = word.trim().sanitiza().split(" ").filter(word1 => word1.length > 2);
const expr = new RegExp(wordss.join('|'), 'ig');
let expr00 = expr;
const RegExpUNICO=wordss;
const nodes = Array.from(el.childNodes);
for (let i = 0; i < nodes.length; i++) {
const node = nodes[i];
if (node.nodeType === 3) {
const nodeValue = node.nodeValue; let matches = [];
while ((match = expr.exec((nodeValue).sanitiza())) !== null) {
//console.log("++"+match);
matches.push(match[0]);
const palavrar = nodeValue.substring(match.index, match.index+match[0].length);
RegExpUNICO.push(palavrar);
}
expr00 = RegExpUNICO.join('|');
let expr0 = new RegExp(expr00, 'ig');
console.log("**"+expr00);
if (matches) {
const parts = nodeValue.split(expr0);
for (let n = 0; n < parts.length; n++) {
if (n) {
const xx = document.createElement("hightx");
xx.style.border = '1px solid blue';
xx.style.backgroundColor = '#ffea80';
const startIndex = nodeValue.indexOf(parts[n - 1]) + parts[n - 1].length;
const palavra = node.nodeValue.substr(startIndex, matches[n - 1].length);
xx.appendChild(document.createTextNode(palavra));
el.insertBefore(xx, node);
}
if (parts[n]) {
el.insertBefore(document.createTextNode(parts[n]), node);
}
}
el.removeChild(node);
}
} else {
node.realcar(word);
}
}
}
在这里尝试代码:https://jsbin.com/vegihit/edit?js,console,output请帮助调试和修复它!
1条答案
按热度按时间csga3l581#
主要问题在这一行:
这假设
parts[n - 1]
在nodeValue
中只出现一次,但不能保证。例如,parts[n - 1]
可能是一个空格,并且在字符串的前面出现过,然后会选择错误的单词。另一个问题较少的问题是
if (matches)
将始终为true,因为即使是空数组也是真实值。应该是if (matches.length)
。为了解决第一个问题,有几种可能的解决方案:你的目标是知道下一个相邻的减法是从
nodeValue
中提取的。您可以通过在nodeValue.split(expr0)
的输出中包含分隔符来实现这一点。你可以通过在正则表达式中添加一个 capture group 来实现。这意味着循环将同时迭代不匹配的子字符串和匹配的子字符串--覆盖整个字符串,没有遗漏。以下是相关代码的更正: