如何使用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>");