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

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);

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

中所示

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

Answer 1

您在 span 标签上遗漏了结束 >，并且您遗漏了从 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代码。

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

Changing text color using replace method

javascript

jquery

str-replace