如何在R Shiny应用中实现简历文本的技能关键词着色渲染？

• 使用textOutput()组件：Shiny的textOutput()会自动对输出内容做HTML转义处理，把所有HTML标签转换为纯文本字符，导致<span style='color:red'>这类样式标签无法被浏览器解析，只能以纯文本形式显示。

要实现文本选择性着色，需要调整UI输出组件和服务器端渲染逻辑两个核心部分：

1. 替换UI中的输出组件 #

将原代码里的textOutput("text")替换为htmlOutput("text")，该组件支持解析并渲染HTML格式内容。

2. 调整服务器端渲染逻辑 #

保持关键词高亮函数不变，将renderText()改为renderUI()，并通过HTML()函数明确标记输出内容为HTML格式，确保样式被正确解析。

修改后的完整代码 #

library(shiny)
library(stringi)

highlight_keywords <- function(text, keywords) {
  # 去除关键词两端空格，过滤空值
  keywords <- trimws(keywords)
  keywords <- keywords[keywords != ""]
  
  for (keyword in keywords) {
    text <- stri_replace_all_fixed(text, keyword, 
                                   paste0("<span style='color:red; font-weight:bold'>", keyword, "</span>"), 
                                   vectorize_all = FALSE)
  }
  return(text)
}

ui <- fluidPage(
  textInput("text", "简历文本"),
  textInput("keywords", "技能关键词（用逗号分隔）"),
  htmlOutput("highlighted_text") # 替换为支持HTML渲染的组件
)

server <- function(input, output) {
  output$highlighted_text <- renderUI({
    # 标记内容为HTML格式，确保样式生效
    HTML(highlight_keywords(input$text, strsplit(input$keywords, ",")[[1]]))
  })
}

shinyApp(ui, server)

额外优化建议 #

• 大小写不敏感匹配：如果需要忽略关键词大小写（比如同时匹配"data science"和"Data Science"），可以将stri_replace_all_fixed替换为正则匹配，添加大小写忽略参数：

text <- stri_replace_all_regex(text, paste0("\\b", keyword, "\\b"), 
                               paste0("<span style='color:red; font-weight:bold'>$0</span>"), 
                               case_insensitive = TRUE)

其中\\b用于匹配完整单词，避免部分匹配（比如关键词"data"不会误匹配"dataanalysis"）。

• 避免重复替换冲突：若关键词存在包含关系（比如"machine learning"和"learning"），建议先对关键词按长度降序排序，优先替换长关键词，防止短关键词提前替换导致长关键词无法匹配。

内容的提问来源于stack exchange，提问作者celise88