个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在编写一个 jquery 插件，它将执行浏览器样式的页面查找搜索。我需要改进搜索，但还不想解析 html。
目前我的方法是采用整个 DOM 元素和所有嵌套元素，然后简单地运行一个正则表达式查找/替换给定的术语。在替换中，我将简单地用一个 span 包围匹配的术语，并使用该 span 作为我的 anchor 来进行突出显示、滚动等操作。重要的是，任何 html 标签内的字符都不匹配。
这是我得到的最接近的结果:
(?<=^|>)([^><].*?)(?=<|$)
它在捕获 html 标签中不的所有字符方面做得非常好，但我在弄清楚如何插入我的搜索词时遇到了麻烦。
Input: Any html element (this could be quite large, eg <body>)
Search Term: 1 or more characters
Replace Txt: <span class='highlight'>$1</span>
更新
当我使用 http://gskinner.com/RegExr/ 进行测试时，以下正则表达式可以满足我的要求...
Regex: (?<=^|>)(.*?)(SEARCH_STRING)(?=.*?<|$)
Replacement: $1<span class='highlight'>$2</span>
但是我在我的 javascript 中使用它时遇到了一些问题。使用以下代码，chrome 给我错误“无效的正则表达式:/(?<=^|>)(.?)(Mary)(?=.?<|$)/:无效组”。
var origText = $('#'+opt.targetElements).data('origText');
var regx = new RegExp("(?<=^|>)(.*?)(" + $this.val() + ")(?=.*?<|$)", 'gi');
$('#'+opt.targetElements).each(function() {
var text = origText.replace(regx, '$1<span class="' + opt.resultClass + '">$2</span>');
$(this).html(text);
});
它打破了组 (?<=^|>) - 这是 Regex 引擎的笨拙还是差异？
更新
此正则表达式在该组中中断的原因是因为 Javascript 不支持正则表达式回顾。供引用和可能的解决方案:http://blog.stevenlevithan.com/archives/mimic-lookbehind-javascript .
最佳答案
只需使用内置的 jQuerys text() method .它将返回所选 DOM 元素中的所有字符。
对于 DOM 方法 ( docs for the Node interface ):遍历元素的所有子节点。如果子节点是元素节点，则递归运行。如果它是文本节点，则在文本 (node.data) 中搜索，如果要突出显示/更改某些内容，请缩短节点的文本直到找到的位置，然后插入一个高亮跨度匹配的文本和文本其余部分的另一个文本节点。
示例代码(调整后，原点为 here ):
(function iterate_node(node) {
if (node.nodeType === 3) { // Node.TEXT_NODE
var text = node.data,
pos = text.search(/any regular expression/g), //indexOf also applicable
length = 5; // or whatever you found
if (pos > -1) {
node.data = text.substr(0, pos); // split into a part before...
var rest = document.createTextNode(text.substr(pos+length)); // a part after
var highlight = document.createElement("span"); // and a part between
highlight.className = "highlight";
highlight.appendChild(document.createTextNode(text.substr(pos, length)));
node.parentNode.insertBefore(rest, node.nextSibling); // insert after
node.parentNode.insertBefore(highlight, node.nextSibling);
iterate_node(rest); // maybe there are more matches
}
} else if (node.nodeType === 1) { // Node.ELEMENT_NODE
for (var i = 0; i < node.childNodes.length; i++) {
iterate_node(node.childNodes[i]); // run recursive on DOM
}
}
})(content); // any dom node
还有 highlight.js ，这可能正是您想要的。
关于html - 使用正则表达式和 javascript 在 html 中突出显示单词 - 差不多了，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33780129/
26
4
0
我有一个加号/减号按钮，希望用户不能选择超过 20 个但不知道如何让它工作。我尝试使用 min="1"max="5 属性，但它们不起作用。这是我的代码和一个 fiddle 链接。https://jsf
我正在尝试复制顶部底部图，如示例 here但它没有正确渲染(紫色系列有 +ve 和 -ve 值，绿色为负值)留下杂乱的人工制品。我也在努力创建一个玩具示例来复制这个问题，所以我希望尽管我缺乏数据，但有
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 这个问题似乎与 help center 中定义的范围内的编程无关。 . 已关闭 6 年前。 社区去年审查了是
这个问题在这里已经有了答案: Adding two positive integers gives negative answer.Why? (4 个答案) 关闭 5 年前。 我遇到了一个奇怪的问题
有谁知道如何将字符串值类型 -4,5 或 5,4 转换为 double -4.5 或 5.4? 最佳答案 只需使用 Double.parseDouble(Locale, String); 糟糕，我很困
我正在尝试根据 TextBlob 分类插入一个仅包含“正”或“负”字符串的新数据框列:对于我的 df 的第一行，结果是 ( pos , 0.75, 0.2499999999999997)我想要' 正
我对 VBA 非常陌生，无法理解如何在一个循环中完成 2 个任务。我非常感谢您的帮助。 我已经能够根据第 3 列中的数据更改第 2 列中的数值，但我不明白如何将负值的字体更改为红色。 表格的大小每月都
欢迎， 我正在使用 jquery 通过 POST 发送表单。 这就是我获得值(value)的方式。 var mytext = $("#textareaid").val(); var dataStrin
double d = 0; // random decimal value with it's integral part within the range of Int32 and always p
我有这个字符串: var a='abc123#xyz123'; 我想构建 2 个正则表达式替换函数: 1) 用 '*' 替换所有确实有 future '#'的字符(不包括'#') 所以结果应该是这样的
我正在使用 DialogFragment。当用户从 Gmail 平板电脑应用程序的屏幕与下面示例图片中的编辑文本进行交互时，我希望正面和负面按钮保持在键盘上方。 在我的尝试中不起作用，这是我的 Dia
从组装艺术一书中，我复制了这句话: In the two’s complement system, the H.O. bit of a number is a sign bit. If the H.O
是否有更好更优雅的方法来实现下面的简单代码(diffYear、A 和 B 是数字): diffYear = yearA - yearB; if (diffYear == 0) { A = B
我正在设计一种语言，并尝试确定 true 应该是 0x01 还是 0xFF。显然，所有非零值都将转换为 true，但我正在尝试确定确切的内部表示。 每种选择的优点和缺点是什么？ 最佳答案 没关系，只要
在我的 dialogfragment 类的 OnCreateDialog 中，我正在这样做: AlertDialog.Builder builder = new AlertDialog.Builder
这个问题在这里已经有了答案: Resolving ambiguous overload on function pointer and std::function for a lambda usin
我偶然发现了一个奇怪的 NSDecimalNumber 行为:对于某些值，调用 integerValue、longValue、longLongValue 等，返回意想不到的值(value)。示例: l
这个问题在这里已经有了答案: Resolving ambiguous overload on function pointer and std::function for a lambda using
我有这个正则表达式来测试用户输入是否有效: value.length === 0 || value === '-' || (!isNaN(parseFloat(value)) && /^-?\d+\.
我想用高斯混合模型拟合数据集，数据集包含大约 120k 个样本，每个样本有大约 130 个维度。当我使用 matlab 执行此操作时，我运行脚本(簇号为 1000): gm = fitgmdist(d
我是一名优秀的程序员,十分优秀！