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

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

您缺少 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 代码。