个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我在执行以下任务时遇到问题:
我需要通过将它包含的一些单词链接到“阅读更多”页面来丰富包含 html 的字符串。不幸的是，当我要替换的搜索词开始重叠时，它变得很棘手。
我要么以嵌套链接结束，要么像下面的示例中那样，更长的术语不会被替换。
let html = `<p>So there is this Text in HTML containing words.</p>
<p>I want to link some special words to their read more pages.</p>
<p>But if search terms contain each other they re not linked correctly. Like the ones above.</p>`;
const linkTo = [
{term: 'words', link: 'https://example.com/words'},
{term: 'special words', link: 'https://example.com/special_words'},
];
for(const pair of linkTo){
const re = new RegExp(pair.term, "g");
html = html.replace(re, `<a href="${pair.link}">${pair.term}</a>`);
}
document.body.innerHTML = html;<html><body></body></html>最佳答案
您需要按长度按降序对键进行排序，并从术语中创建一个正则表达式:
let html = `<p>So there is this Text in HTML containing words.</p>
<p>I want to link some special words to their read more pages.</p>
<p>But if search terms contain each other they re not linked correctly. Like the ones above.</p>`;
const linkTo = [
{term: 'words', link: 'https://example.com/words'},
{term: 'special words', link: 'https://example.com/special_words'},
];
const keys = linkTo.map(x => x.term).sort((a, b) => b.length-a.length)
const re = new RegExp("\\b(?:" + keys.join("|") + ")\\b", "g");
html = html.replace(re, (m) => `<a href="${linkTo.find(x => m == x.term).link}">${m}</a>`);
document.body.innerHTML = html;<html><body></body></html>\b 的原因在两端，字边界。
const keys = linkTo.map(x => x.term.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')).sort((a, b) => b.length-a.length)
const re = new RegExp("(?<!\\w)(?:" + keys.join("|") + ")(?!\\w)", "g");
linkTo.map(x => x.term).sort((a, b) => b.length-a.length) - 获取 terms来自 linkTo项目并按长度按降序对它们进行排序，越长的优先。这是必要的，因为 The Regex Engine Is Eager第一个替代方案“获胜”并使正则表达式引擎停止处理其他替代方案new RegExp("\\b(?:" + keys.join("|") + ")\\b", "g")构建一个像 \b(?:special words|words)\b 这样的正则表达式.replace(re, (m) => `<a href="${linkTo.find(x => m == x.term).link}">${m}</a>`) - 只解析一次字符串，并用相应的link 替换每个匹配项. let html = `<p>So there is this Text in HTML containing words.</p>
<p>I want to link some special words to their read more pages.</p>
<p>But if search terms contain each other they re not linked correctly. Like the ones above.</p>`;
const linkTo = [
{term: 'words', link: 'https://example.com/words'},
{term: 'special words', link: 'https://example.com/special_words'},
];
const keys = linkTo.map(x => x.term.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')).sort((a, b) => b.length-a.length)
const re = new RegExp("(\\W|^)(" + keys.join("|") + ")(?!\\w)", "g");
html = html.replace(re, (x,y,z) => `${y}<a href="${linkTo.find(i => z == i.term).link}">${x}</a>`);
document.body.innerHTML = html;关于javascript - 用链接替换 html 中的单词，但如果搜索词冲突，则更喜欢更长的单词，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65341353/
26
4
0
所以我的问题是: 为什么(以及如何避免)C# 中的 Is 运算符的生命周期比 if 中使用的更长？ 例子: Animal a = new Cat(); if (a is Cat c) { Co
我遇到了这个问题，我已经尝试解决了很长一段时间。理想情况下，我希望 particles.js 的“生成框”向下延伸到页面底部(由 fullpage.js 计算的 7 x viewport)，这样当使用
我想让一个 div(我的侧边栏)延伸到页面底部。我知道我需要添加“高度:100%；”为了做到这一点。 但是当我添加 height: 100%; 时，内容少于侧边栏的页面会降低侧边栏的高度，然后您就看不
只有我这么认为吗，还是在 SQL Server 2008 Management Studio 中扩展数据库列表比在 SQL Server 2005 Management Studio 中扩展数据库列表
我是一名优秀的程序员,十分优秀！