英文:
Highlight listed texts into HTML based on predefined color mapping
问题
我想制作一个脚本，使用预定义的颜色映射来突出显示特定文本。
在这种情况下，我希望从myDiv中的标签使用它们对应的颜色进行突出显示。
const tagColors = {
"#tag": "#00ccff",
"#tagAgain": "#ff0808"
};
const tags = Object.keys(tagColors).sort((a, b) => b.length - a.length);
let text = document.getElementById("myDiv").innerHTML;
for (const tag of tags) {
text = text.replace(new RegExp(`\\${tag}`, "g"), highlight(tag));
}
function highlight(tag) {
return `<span style='color:${tagColors[tag]}'>$&</span>`;
}
document.getElementById("myDiv").innerHTML = text;
<div id="myDiv">
This is some text with #tag, #tags, #tagtag, #notListed and #tagAgain.
</div>
问题是#tagAgain被单独突出显示：#tag是#00ccff，而Again是#ff0808。
我尝试将正则表达式更改为\\${tag}\\b，但它不会突出显示#tag中的#tags。我希望如果标签后面跟着其他单词，它仍然会被突出显示（留下额外的单词不被突出显示）。
英文:
I want to make a script that highlights certain text using predefined color mapping.
For this case I want the tags from myDiv to be highlighted with their corresponding colors from tagColors object
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const tagColors = {
"#tag": "#00ccff",
"#tagAgain": "#ff0808"
};
const tags = Object.keys(tagColors).sort((a, b) => b.length - a.length);
let text = document.getElementById("myDiv").innerHTML;
for (const tag of tags) {
text = text.replace(new RegExp(`\${tag}`, "g"), highlight(tag));
}
function highlight(tag) {
return `<span style='color:${tagColors[tag]}'>$&</span>`;
}
document.getElementById("myDiv").innerHTML = text;
<!-- language: lang-html -->
<div id="myDiv">
This is some text with #tag, #tags, #tagtag, #notListed and #tagAgain.
</div>
<!-- end snippet -->
The problem is that #tagAgain gets highlighted separately: the #tag is #00ccff and the Again is #ff0808.
I did try changing the regex to \\${tag}\\b, but it doesn't highlight the #tag in #tags. I want it to still be highlighted if the tag is continued with other words (leaving the extra words to be not highlighted.)
答案1
得分: 0
你尝试使用 for..in 遍历数组（Object.keys()）。所以代码失败了，因为你得到的是整数索引而不是标签名称。
const tagColors = {
"tag": "#00ccff",
"tagAgain": "#ff0808"
};
let text = document.getElementById("myDiv").innerHTML;
const tags = Object.keys(tagColors).sort((a, b) => b.length - a.length).map(escapeRegex).join('|');
text = text.replace(new RegExp(`#(${tags})`, "g"), (_, tag) => `<span style='color:${tagColors[tag]}'>#${tag}</span>`);
// https://stackoverflow.com/a/3561711/14098260
function escapeRegex(string) {
return string.replace(/[/\-\\^$*+?.()|[\]{}]/g, '\$&');
}
document.getElementById("myDiv").innerHTML = text;
<div id="myDiv">
这是一些带有<#tag>的文本 #tag++，#tags，#tagtag，#notListed 和 #tagAgain。
</div>
英文:
You try to for..in the array (Object.keys()). So the code fails since you get integer indices instead of tag names.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const tagColors = {
"tag": "#00ccff",
"tagAgain": "#ff0808"
};
let text = document.getElementById("myDiv").innerHTML;
const tags = Object.keys(tagColors).sort((a,b) => b.length - a.length).map(escapeRegex).join('|');
text = text.replace(new RegExp(`#(${tags})`, "g"), (_, tag) => `<span style='color:${tagColors[tag]}'>#${tag}</span>`);
//https://stackoverflow.com/a/3561711/14098260
function escapeRegex(string) {
return string.replace(/[/\-\\^$*+?.()|[\]{}]/g, '\$&');
}
document.getElementById("myDiv").innerHTML = text;
<!-- language: lang-html -->
<div id="myDiv">
This is some text with <#tag>s #tag++, #tags, #tagtag, #notListed and #tagAgain.
</div>
<!-- end snippet -->
答案2
得分: 0
以下是已翻译的内容：
如何处理 CSS？以下是您的示例和一些样式：
<!-- 开始代码片段：js 隐藏：false 控制台：true Babel：false -->
<!-- 语言：lang-js -->
const tagColors = {
"#tag": "#00ccff",
"#tagAgain": "#ff0808"
};
const tags = Object.keys(tagColors).sort((a, b) => b.length - a.length);
let text = document.getElementById("myDiv").innerHTML;
for (const tag of tags) {
text = text.replace(new RegExp(`\${tag}`, "g"), highlight(tag));
}
function highlight(tag) {
return `<span style='color:${tagColors[tag]}'>$&</span>`;
}
document.getElementById("myDiv").innerHTML = text;
<!-- 语言：lang-css -->
#myDiv span span {
color: inherit!important;
}
<!-- 语言：lang-html -->
<div id="myDiv">
This is some text with #tag, #tags, #tagtag, #notListed and #tagAgain.
</div>
<!-- 结束代码片段 -->
英文:
How about css? Here's your example and some styling:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const tagColors = {
"#tag": "#00ccff",
"#tagAgain": "#ff0808"
};
const tags = Object.keys(tagColors).sort((a, b) => b.length - a.length);
let text = document.getElementById("myDiv").innerHTML;
for (const tag of tags) {
text = text.replace(new RegExp(`\${tag}`, "g"), highlight(tag));
}
function highlight(tag) {
return `<span style='color:${tagColors[tag]}'>$&</span>`;
}
document.getElementById("myDiv").innerHTML = text;
<!-- language: lang-css -->
#myDiv span span {
color: inherit!important;
}
<!-- language: lang-html -->
<div id="myDiv">
This is some text with #tag, #tags, #tagtag, #notListed and #tagAgain.
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论