使用替换方法更改文本颜色

Question

当用户单击单元格值时，我在单击处理程序中使用以下代码（如下面的 JSFiddle 所示）替换文本：

  var value = event.args.value;
  var color = "#FF0000";

  var highlighted = text.replace(
                ' ' + value + ' ', 
                "<span style='color:" + color + ";'</span> "
              );

  panel.jqxPanel('clearcontent');
  panel.jqxPanel('append', highlighted);

第一季度： 它的行为方式不同。我的意思是，当我单击第一个单元格值时，它会将所有内容转换为红色，单击其他值会使其行为方式不同，如我的 JSFiddle here

第二季度。我可以使用什么来保留 html 格式？我的意思是使用 var text = panel.html(); 而不是 var text = panel.text(); 对我不起作用。

Answer 1

您缺少跨度标记上的结束 >，并且您省略了从 var value = event.args.value; 获得的 value，因此该词丢失了。

var highlighted = text.replace(
            ' ' + value + ' ', 
            ' <span style="color:' + color + ';">' + value + '</span> '
//                                              ^    ^^^^^

注意，我还更改了使用的引号字符，以便 HTML 可以使用在标记中更常用的双引号 "，并且 javascript 不关心字符串的单引号或双引号 - 使用任何你喜欢的，为了您自己的理智，请保持一致。

试试我创建的updated fiddle，只更改那一行，你会看到你点击的单词被突出显示。

---

也就是说，通常最好避免像 color="#FF0000" 这样的内联样式，而是使用类和 CSS 样式来代替它们。相反，您可以使用更简单的代码，而不必将 var color 放入其中：

var highlighted = text.replace(
            ' ' + value + ' ', 
            ' <span class="selected">' + value + '</span> '

您的 CSS 将有一个规则 span.selected { color: #FF0000; } ... 然后，将您的突出显示颜色从红色重新设置为其他颜色，您只需更改 CSS 而不必更改您的 javascript 代码。