基於正則表達式突出顯示DT中的單詞

Question

使用閃亮的DT，我希望能夠突出顯示所選單詞。 設置searchHighlight = TRUE接近我想要的，但這也會突出顯示包含搜索的單詞。 例如，如果我正在搜索“on”，它也將匹配“stone”，突出顯示中間的“on”。

示例圖像：

我可以優化搜索選項，使regex = TRUE ，但不會突出顯示。 如果我想使用像“on | in”這樣的正則表達式，也是如此。

示例（包括正則表達式）：

library(shiny)
library(DT)
library(data.table)

example_data <- data.table(words = c("on", "scone", "wrong", "stone"), 
                           description = c("The word on", "Scone is not on.", "Not on either", "Not here at all"))

ui = shinyUI(fluidPage(

  sidebarLayout(
    sidebarPanel(
      textInput("word_select", label = "Word to search")
      ),
    mainPanel(
      dataTableOutput("word_searched")
    )
  )
))

server = shinyServer(function(input, output, session) {

  output$word_searched <- renderDataTable({
    datatable(
      example_data, 
      options = list(searchHighlight = TRUE, 
                     search = list(regex = TRUE, 
                                   search = paste0("\\b", tolower(input$word_select), "\\b")))
    )
  })

  })

shinyApp(ui = ui, server = server)

DT已經通過反應式表達式對單詞進行過濾，因此所有字段肯定會包含所選單詞，但我只是想避免用戶認為錯誤地將更長的單詞包含在搜索中的混淆。 我在示例中沒有這樣做，只是確認這不是我關注的元素。

謝謝你的幫助。

（已編輯以在示例數據中添加帶標點符號的單詞示例。）

Answer 1

您可以創建一個首先按輸入過濾的reactive元素，然后將匹配的單詞替換為嵌入在<span style="background-color:yellow;">標記中的相同單詞，而不是依賴於數據表的搜索功能。 這應該通過更復雜的正則表達式提供更多搜索靈活性。

您需要將escape = F添加到datatable以便正確解釋HTML標記。 我已將options = list(dom = "lt")到datatable以刪除數據表的搜索字段並將注意力引向左搜索字段。

過濾標准保持相當模糊，以防止表格消失，直到找到完美匹配 - 即當您鍵入“o”時表格不應消失，因為沒有完美匹配，然后重新出現在“on”上。 然后僅在找到匹配的單詞時顯示高亮顯示，即on ， On和on. ，但不是stone ， scone等。這里是一瞥它的樣子：

這是代碼。 請注意，我使用dplyr的過濾和變異函數，因為它們可以通過*_all變體輕松應用於多個列：

library(shiny)
library(DT)
library(data.table)
library(dplyr) # For `filter_all` and `mutate_all`.

example_data <- iris
    # data.table(words = c("on", "scone", "wrong", "stone"), 
    #                        description = c("The word on", "Scone is not on.", "Not on either", "Not here at all"))

ui = shinyUI(fluidPage(

    sidebarLayout(
        sidebarPanel(
            textInput("word_select", label = "Word to search")
        ),
        mainPanel(
            dataTableOutput("word_searched")
        )
    )
))

server = shinyServer(function(input, output, session) {

    # This is your reactive element.
    df_reactive <- reactive({
            example_data %>%
                # Filter if input is anywhere, even in other words.
                filter_all(any_vars(grepl(input$word_select, ., T, T))) %>% 
                # Replace complete words with same in HTML.
                mutate_all(~ gsub(
                              paste(c("\\b(", input$word_select, ")\\b"), collapse = ""),
                              "<span style='background-color:yellow;'>\\1</span>",
                              .,
                              TRUE,
                              TRUE
                              )
                          )
    })

    # Render your reactive element here.
    output$word_searched <- renderDataTable({
        datatable(df_reactive(), escape = F, options = list(dom = "lt"))
    })

})

shinyApp(ui = ui, server = server)

Answer 2

我不確定這是你想要的但是我認為這很接近：這不執行精確搜索（例如“on”將匹配“stone”）但這僅突出顯示完全匹配 （例如“on”不會突出顯示）。 這使用mark.js庫。

dtable <- datatable(iris[c(1,2,51,52,101,102),], 
                    options = list(
                      mark = list(accuracy = "exactly")
                    )
)
dep1 <- htmltools::htmlDependency(
  "datatables.mark", "2.0.1", 
  src = c(href = "https://cdn.datatables.net/plug-ins/1.10.19/features/mark.js"),
  script = "datatables.mark.min.js")
dep2 <- htmltools::htmlDependency(
  "jquery.mark", "8.11.1", 
  src = c(href = "https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1"), 
  script = "jquery.mark.min.js")
dtable$dependencies <- c(dtable$dependencies, list(dep1, dep2))
dtable