如何使用JavaScript更新闪亮的htmlOutput的内容

Question

闪亮的应用程序显示一个句子。

当用户选择句子的某个部分并单击Mark按钮添加标记时，应该更新该句子以反映该操作。

实施例：
样品输入：用于演示
选择的样品的句子：句子
希望的输出：将试样<markup> sentence for </markup>演示

以下是有光泽的应用程序代码和相关的JavaScript代码：

library(shiny) 
ui <- fluidPage(
    tags$head(tags$script(src="addMarkup.js")), 
    titlePanel("Mark text selection"), 
    mainPanel(htmlOutput("content"), 
     actionButton("Mark", "Mark", onclick="addMarkup()") 
    ) 
) 

server <- function(input, output) { 
    sentence <- "A sample sentence for demo" 
    output$content <- renderText(sentence) 
} 

shinyApp(ui = ui, server = server) 

addMarkup.js

function addMarkup(){ 
    var sent=""; 
    sent= document.getElementById("content").innerHTML; 
    var selection=""; 
    if(window.getSelection){ 
    selection = window.getSelection().toString(); 
    } 
    else if(document.selection && document.selection.type != "Control"){ 
    selection = document.selection.createRange().text; 
    } 
    marked = "<markup>".concat(selection).concat("</markup>"); 
    result = sent.replace(selection, marked); 
    alert(result); 
    document.getElementById("content").innerHTML = result; 
} 

问题：的alert(result)它只表示期望的输出，但随后的线不更新content。

如何实现此功能？

请同时建议是否存在一个纯闪亮的解决方案（如何在不涉及JavaScript的情况下实现）。

Answer 1

您的代码正在工作。问题在于HTML中不存在<markup>标签。如果您将<markup>更改为<mark>，它将起作用。

marked = "<mark>".concat(selection).concat("</mark>");